feat: Revamp homepage with pulp noir design (Issue #293)#371
feat: Revamp homepage with pulp noir design (Issue #293)#371diksha78dev wants to merge 5 commits into
Conversation
|
@diksha78dev is attempting to deploy a commit to the Drago's projects Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
Bot
added
Enhancement
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughRedesign of the home page and global styling: enforces a dark "Pulp Noir" theme with new font stacks and tokens, replaces the monolithic Home/page and complex header with modular home sections (HeroSection, TrendingSection, CTASection) and new components (FeaturePillars, FeaturePillarCard, BoomAIPowered), removes legacy animations and simplifies wallet/connect flows. Changes
Sequence DiagramsequenceDiagram
participant User
participant App as app/page.tsx
participant Hero as HeroSection
participant Features as FeaturePillars
participant Trending as TrendingSection
participant CTA as CTASection
participant Web3 as useWeb3
User->>App: Request home page
App->>Hero: Render HeroSection (pass connectWallet, isConnected)
Hero->>Features: Render FeaturePillars
App->>Trending: Render TrendingSection
App->>CTA: Render CTASection
User->>Hero: Click "CONNECT WALLET"
Hero->>Web3: call connectWallet()
Web3-->>Hero: connecting / connected state
Hero-->>User: update UI (spinner/connected)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 4❌ Failed checks (3 warnings, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 17
🤖 Fix all issues with AI agents
In `@app/globals.css`:
- Around line 170-182: The .comic-card hover behavior is duplicated between
`@layer` components (the .comic-card rule with transform: translateY(-4px) and
box-shadow: 4px 4px 0px `#8B0000`) and `@layer` utilities (the .comic-card:hover
rule applying animation: comic-glow 2s infinite whose keyframes set box-shadow
to 6px 6px 0px), causing conflicting transforms/box-shadows; pick one location
to own hover behavior—either keep hover transform in `@layer` components and
remove the .comic-card:hover animation from `@layer` utilities, or move the
transform and original box-shadow into the comic-glow keyframes and remove the
separate component hover—update/merge the rules for .comic-card, the
.comic-card:hover selector, and the comic-glow keyframes so only one hover rule
controls transform and box-shadow consistently.
- Around line 74-80: Replace the hardcoded colors in the body rule with the CSS
variables defined in :root: change background-color: `#050505` to
background-color: var(--background) and color: `#E5E5E5` to color:
var(--foreground) so the body uses the centralized tokens (referencing the body
selector and the --background/--foreground variables).
- Line 1: The `@import` URL in globals.css uses the delisted "Source Sans Pro";
update the font name in that import string to "Source Sans 3" by replacing the
"Source+Sans+Pro" token in the URL with "Source+Sans+3" so the stylesheet
imports the correct, supported font family (check the existing `@import` line that
includes Permanent+Marker, Big+Shoulders+Display, Roboto+Condensed and
Source+Sans+Pro and change only the Source+Sans+Pro segment).
In `@app/page.tsx`:
- Around line 7-10: HeroSection is rendered without the connectWallet and
isConnected props that drive its "CONNECT WALLET" CTA; define or obtain an
isConnected boolean and a connectWallet handler (e.g., from your wallet
hook/context or local handler) in this component/page and pass them into
<HeroSection connectWallet={connectWallet} isConnected={isConnected} /> so the
button is wired, or if you prefer to hide the CTA until wallet support is ready
remove the button from HeroSection; reference the HeroSection component and the
connectWallet and isConnected symbols when making the change.
In `@components/header.tsx`:
- Around line 46-54: The CONNECT WALLET button in Header (components/header.tsx)
is missing an onClick and thus is non-functional; either wire it to existing
wallet logic (call the wallet connect function, e.g., connectWallet or
handleConnectClick exported/defined in Header or passed via props) and ensure it
updates UI state (connected address/disabled state), or disable/remove it: add
disabled prop and a title/tooltip like "Wallet integration coming soon" and
adjust className to indicate disabled state; update any prop/function names
(connectWallet, handleConnectClick, onConnect) to match your codebase so the
button calls the correct handler or clearly shows it's inactive.
- Around line 18-43: The nav section currently uses "hidden md:flex" so mobile
screens show no links; update the Header component to add a hamburger toggle
button (with accessible aria-label/aria-expanded) that controls a local open
state (useState) and toggles the mobile menu; change the nav rendering so the
Link list is visible on small screens when open (e.g., conditionally apply
classes instead of "hidden md:flex") and remains the existing md:flex layout on
larger screens, and ensure the toggle and menu have appropriate semantic roles
and focus handling for accessibility.
In `@components/home/boom-ai-powered.tsx`:
- Around line 40-43: In the BoomAIPowered React component the right-column div
with className "md:w-1/2 grid grid-cols-1 gap-6" is rendering empty and causing
a lopsided layout; either remove that div until feature cards are implemented or
add a minimal placeholder (e.g., a single FeatureCard or a centered "Coming
soon" element) so the two-column layout stays balanced—update the JSX in
boom-ai-powered.tsx by either deleting the empty right-column element or
replacing it with the interim placeholder component/content.
- Around line 25-27: The H2 with className on the BOOM! heading is using a fixed
text-[10rem] which overflows mobile; update the h2 element (the BOOM! heading)
to use responsive Tailwind font-size utilities (e.g., small viewport -> 4rem,
medium -> 7rem, large -> 10rem) by replacing the single text-[10rem] with
responsive variants (for example text-[4rem] md:text-[7rem] lg:text-[10rem])
while preserving the existing leading, drop-shadow and inline style (transform:
'rotate(-12deg)') so the visual appearance stays the same across breakpoints.
- Around line 1-48: The BoomAIPowered component is orphaned and has a few style
issues; either add it to the home barrel export (export { BoomAIPowered } from
'./boom-ai-powered') and import/use it where appropriate, or delete the file to
remove dead code. Also remove the unnecessary 'use client' directive from the
top of boom-ai-powered.tsx, replace the inline style transform={{ rotate(-12deg)
}} with Tailwind class -rotate-12 on the H2, and make the oversized text
responsive (e.g., replace text-[10rem] with a combination like md:text-[10rem]
text-6xl) so it doesn't overflow on mobile.
In `@components/home/cta-section.tsx`:
- Around line 59-70: The H3 with className "text-9xl" in
components/home/cta-section.tsx will overflow on mobile; replace the single
fixed size with responsive text utilities on that H3 (e.g., set a base mobile
size and then larger breakpoints) such as text-[4rem] for base, md:text-[7rem],
lg:text-[10rem] (or the equivalent Tailwind responsive classes your project
uses) so the heading scales 4rem/7rem/10rem across viewports and prevents
horizontal overflow.
- Around line 75-86: The anchor using href="/create/ai-story" in
components/home/cta-section.tsx should use Next's Link for client-side
navigation: import Link from 'next/link' and replace the <a
href="/create/ai-story" ...>JOIN THE REVOLUTION</a> with a Next <Link> that
preserves the same className, inline style, boxShadow, transform, and hover
behavior (either <Link href="/create/ai-story" className="..."
style={{...}}>JOIN THE REVOLUTION</Link> if your Next version supports passing
className to Link, or <Link href="/create/ai-story"><a className="..."
style={{...}}>JOIN THE REVOLUTION</a></Link> to wrap the anchor).
In `@components/home/feature-pillar-card.tsx`:
- Around line 8-9: FeaturePillarCard is unused and accepts Tailwind class names
at runtime via the props backgroundColor and darkModeBackgroundColor which risks
JIT purging; either remove the FeaturePillarCard component entirely, or refactor
it to avoid dynamic Tailwind classes by replacing those props with a constrained
variant prop (e.g., variant: 'primary'|'secondary' and map variants to static
Tailwind class strings inside the component) or by accepting raw CSS values via
a style prop (e.g., backgroundColor as a color string applied with style={{
backgroundColor }}) so the build-time Tailwind scanner can keep required
classes.
In `@components/home/feature-pillars.tsx`:
- Around line 20-34: Replace the inline card markup in FeaturePillars (the map
over features in the JSX) with the existing FeaturePillarCard component: import
FeaturePillarCard, then for each feature call <FeaturePillarCard .../> (or the
equivalent JSX) passing feature.title, feature.description, feature.icon,
feature.bgColor (or backgroundColor), and feature.href/deeplink if present;
remove the duplicated .comic-card markup and any hardcoded classes so the
FeaturePillarCard controls icon, title, description and background styling and
supports optional deep-linking via the href prop.
In `@components/home/hero-section.tsx`:
- Around line 112-131: The HeroSection's CONNECT WALLET button calls
connectWallet which is undefined because the parent didn't pass it; update
HeroSection to accept a connectWallet prop (e.g., function type) and either (A)
require the parent to pass the handler (ensure app's parent component passes the
connectWallet function into <HeroSection connectWallet={...}>) or (B) make the
button safe when no prop is provided by checking the prop before calling it and
rendering the button as disabled/hidden when connectWallet is falsy (adjust
onClick to a no-op or conditional call and add disabled styling/aria-disabled).
Locate the button in the HeroSection component and the connectWallet prop usage
to implement one of these fixes.
In `@components/home/trending-section.tsx`:
- Around line 87-89: In TrendingSection (components/home/trending-section.tsx)
replace the placeholder anchors for the "VIEW ALL" and "VIEW NFT" elements:
either wrap the text in Next.js <Link> with the proper route (import Link from
'next/link') and keep the existing className on the child element, or, if the
route isn't ready yet, convert them to <button> elements (preserving className
and adding accessible attributes like type="button" and aria-label) so clicks
don't jump to top; update the import list to include Link when used and remove
href="#" anchors entirely.
- Around line 80-82: The h2 element rendering "TRENDING STORIES" currently uses
a fixed "text-7xl" which will overflow on small screens; update that h2 (the
element with className containing "text-7xl") to use responsive utility steps
(for example: smaller base size and increasing classes at sm/md/lg breakpoints)
matching the pattern used in other sections so it scales down on mobile and
steps up to 7xl at large viewports.
In `@tailwind.config.ts`:
- Line 28: The Tailwind color token "primary" was changed from an object to a
plain string which removes generated utilities like
text-primary-foreground/bg-primary-foreground and breaks CSS-variable
indirection; revert "primary" to the object shape used by other tokens (e.g.,
primary: { DEFAULT: 'var(--primary)', foreground: 'var(--primary-foreground)' })
so utilities remain and variables are preserved (update the primary entry in
tailwind.config.ts where primary is currently '#8B0000'); also remove the unused
fontFamily import at the top of the file (the import on line 2) since it is not
spread into the config.
🧹 Nitpick comments (13)
tailwind.config.ts (1)
2-2: Unused import:fontFamily.
fontFamilyis imported fromtailwindcss/defaultThemebut never referenced in the config. The custom font stacks on lines 66–69 use literal arrays instead of spreading...fontFamily.sans, etc.Either use it or remove it
-import { fontFamily } from 'tailwindcss/defaultTheme';Or, to include system fallbacks:
- display: ['Permanent Marker', 'cursive'], + display: ['Permanent Marker', ...fontFamily.sans],components/header.tsx (1)
7-14: Prefer Tailwind utilities over inline styles for consistency.Lines 7 and 13 use inline
stylefor colors that have Tailwind equivalents (bg-black/bg-pulp-black,text-primary). The rest of the component already uses Tailwind classes.Suggested diff
- <header className="sticky top-0 z-50 border-b-4 border-black" style={{ backgroundColor: '#000000' }}> + <header className="sticky top-0 z-50 border-b-4 border-black bg-black">- <span style={{ color: '#8B0000' }}>TALES</span> + <span className="text-primary">TALES</span>app/globals.css (1)
184-195:.halftoneand.noir-overlayclasses are defined but unused by the new components.These utility classes implement the exact halftone dot pattern and noir gradient that
cta-section.tsx,trending-section.tsx, andboom-ai-powered.tsxall recreate via inline styles. Use these classes in the components instead of duplicating the styles inline, reducing code duplication across all three components.components/home/cta-section.tsx (1)
18-20: Same hardcoded image URL duplicated across all new components.This exact Google-hosted URL appears in
boom-ai-powered.tsx,cta-section.tsx, andtrending-section.tsx(for both section backgrounds and card images). Extract it to a shared constant to avoid duplication and simplify future asset changes.components/home/trending-section.tsx (2)
8-36: Hardcoded story data should be externalized.The PR objectives call for a "data-driven grid/carousel of featured story cards." Currently, the stories array is hardcoded inside the component with static placeholder data. At minimum, accept stories as a prop so the parent page can fetch/provide real data. This also improves testability.
Sketch of prop-driven approach
+interface Story { + id: number; + title: string; + genre: string; + author: string; + views: number; + favorites: number; + tokens: number; + imageUrl?: string; +} + +interface TrendingSectionProps { + stories?: Story[]; +} + -export function TrendingSection() { - const stories = [ - ... - ]; +export function TrendingSection({ stories = DEFAULT_STORIES }: TrendingSectionProps) {
94-178: Extract the story card into a dedicated component.The card rendering logic spans ~85 lines with its own image, genre tag, title overlay, author info, stats, and CTA. Extracting it into a
StoryCardcomponent would improve readability, reusability, and testability — consistent with howFeaturePillarCardwas extracted for the feature pillars section.components/home/feature-pillar-card.tsx (1)
10-10:indexprop is accepted but never used.The
indexprop (with default0) is declared in the interface and destructured, but never referenced in the JSX or any logic. Remove it to avoid confusion.Proposed fix
interface FeaturePillarCardProps { title: string; description: string; icon: React.ReactNode; backgroundColor: string; darkModeBackgroundColor?: string; - index?: number; } export function FeaturePillarCard({ title, description, icon, backgroundColor, darkModeBackgroundColor = 'dark:bg-slate-800/50', - index = 0, }: FeaturePillarCardProps) {Also applies to: 24-24
components/home/hero-section.tsx (6)
5-8:isConnectedprop is declared but never used.The
isConnectedprop is accepted and defaulted tofalsebut never referenced in the component body. Either remove it or use it (e.g., to toggle the "CONNECT WALLET" button label/state).Proposed fix (if not needed yet)
interface HeroSectionProps { connectWallet?: () => Promise<void>; - isConnected?: boolean; } export function HeroSection({ connectWallet, - isConnected = false, }: HeroSectionProps) {
27-34: Use Next.js<Image>(or at minimum addloading="lazy") instead of raw<img>.Plain
<img>tags bypass Next.js image optimization (automatic lazy-loading, responsive srcsets, format negotiation). These are large hero images that directly impact LCP. Consider usingnext/imagewithfillandpriorityfor the above-the-fold hero, andloading="lazy"for the second panel image. The same concern applies to the<img>on line 148.
63-70: RedundantlineHeight— specified in both Tailwind class and inline style.
leading-[0.9](line 64) andlineHeight: '0.9'(line 69) set the same property. Remove one to avoid confusion about which takes precedence.Suggested fix
className="text-[4rem] md:text-[7rem] lg:text-[10rem] leading-[0.9] mb-8 font-display text-white uppercase" style={{ filter: 'drop-shadow(10px 10px 0px `#050505`)', WebkitTextStroke: '1px rgba(255,255,255,0.1)', transform: 'rotate(-2deg)', - lineHeight: '0.9', }}
92-131: Consider replacing inlineonMouseEnter/onMouseLeavehandlers with Tailwind hover utilities or CSS classes.Six inline event handlers for hover styling are verbose, error-prone to keep in sync, and don't cover keyboard
:focus-visiblestates (accessibility gap). Tailwind'shover:andfocus-visible:variants or the existingaction-buttonutility class mentioned in the PR would be cleaner.
17-53: Significant duplication of the background overlay pattern across both panels (and other sections).The background image + noir gradient overlay + halftone pattern is repeated almost identically in both
<section>blocks here, and again intrending-section.tsxandcta-section.tsx. Consider extracting a shared<NoirBackground>component that acceptsgradientandfilterprops to reduce copy-paste drift.Also applies to: 137-173
72-72: Hardcoded hex values instead of CSS variable references.Colors like
#8B0000,#050505, and#E5E5E5appear as raw hex literals throughout inline styles. The PR description mentions a consolidated:roottheme. Usingvar(--pulp-blood)(or equivalent token names) in these inline styles would keep the component in sync with theme changes and reduce magic values.Also applies to: 96-97, 116-117, 183-184
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@app/globals.css`:
- Line 44: The CSS variable --font-body currently references the delisted
'Source Sans Pro'; update its value to match the imported font (e.g., 'Source
Sans 3', sans-serif) so elements using var(--font-body) (used on html and body)
will actually use the loaded font; locate the --font-body declaration in
globals.css and replace the font-family string while keeping the fallback(s).
In `@components/header.tsx`:
- Around line 53-57: Add an aria-expanded attribute to the mobile menu toggle
button so assistive tech knows the menu state: update the button that currently
uses onClick={() => setMobileMenuOpen(!mobileMenuOpen)} to include
aria-expanded={mobileMenuOpen} (and keep aria-label). Reference the toggle's
state variable mobileMenuOpen and setter setMobileMenuOpen and ensure the
attribute updates whenever mobileMenuOpen changes.
- Around line 63-66: The mobile dropdown rendered when mobileMenuOpen is true
lacks a z-index, so the absolute-positioned div (the element with className
"md:hidden absolute top-20 left-0 right-0 border-t-4 border-black") can be
overlapped by other content; add an appropriate stacking class (e.g., a Tailwind
z- utility like z-50 or z-30) to that div's className so the dropdown appears
above page content while keeping existing positioning and styles.
In `@tailwind.config.ts`:
- Line 72: The Tailwind font family entry currently uses the old name 'Source
Sans Pro' (see the body: ['Source Sans Pro', 'sans-serif'] entry) which doesn't
match the Google Fonts import of Source Sans 3; update the Tailwind config's
font-family for the "body" key to the exact font name used by the Google import
(e.g., 'Source Sans 3') so the generated utility (font-body) matches the loaded
font and avoids fallback to sans-serif. Ensure the change is made in the
tailwind.config.ts file where the body font array is defined.
🧹 Nitpick comments (6)
components/header.tsx (1)
18-18: Hardcoded inline colors instead of theme tokens.The PR objective states "Hex-only consolidated theme (:root)" with centralized color tokens, yet
#000000,#8B0000, etc. are hardcoded as inline styles throughout this component. This undermines the token system and makes future theming changes error-prone. Reference the CSS custom properties instead.♻️ Example using CSS custom properties
Assuming
:rootdefines--color-backgroundand--color-primary:- <header className="sticky top-0 z-50 border-b-4 border-black" style={{ backgroundColor: '#000000' }}> + <header className="sticky top-0 z-50 border-b-4 border-black" style={{ backgroundColor: 'var(--color-background)' }}>- style={{ - backgroundColor: '#8B0000', - border: 'none', - }} + style={{ + backgroundColor: 'var(--color-primary)', + border: 'none', + }}Better yet, map these tokens to Tailwind config so you can use utility classes like
bg-primarydirectly and eliminate inline styles entirely.Also applies to: 24-24, 44-46, 66-66, 81-83
app/globals.css (5)
96-99:::selectionuses hardcoded hex values instead of CSS variables.These should reference the centralized tokens for consistency with the rest of the
:root-based theming.Proposed fix
::selection { - background-color: `#8B0000`; - color: `#E5E5E5`; + background-color: var(--primary); + color: var(--foreground); }
146-167:.action-buttonhardcodes colors and font-family, bypassing the centralized theme tokens.
#050505,#000, and'Permanent Marker'are all available throughvar(--color-pulp-black)/var(--background)andvar(--font-display). Using the variables keeps this component in sync if the palette is ever adjusted.Proposed fix (key lines)
.action-button { display: inline-block; background-color: var(--primary); color: white; font-size: 2.25rem; padding: 1rem 3rem; - border: 2px solid `#050505`; + border: 2px solid var(--color-pulp-black); transition: all 0.2s ease-in-out; transform: scale(1); - box-shadow: 6px 6px 0px `#000`; + box-shadow: 6px 6px 0px var(--color-pulp-black); text-transform: uppercase; cursor: pointer; - font-family: 'Permanent Marker', cursive; + font-family: var(--font-display); font-weight: bold; }
127-138:transition: allon every interactive element is a performance concern.
transition: all 0.2sona, button, input, select, textarea(line 132-138) forces the browser to watch every animatable property for changes. On low-end devices this can cause jank, especially when layout properties change. Scope the transition to the properties you actually animate (e.g.,color,background-color,transform,box-shadow).Proposed fix
a, button, input, select, textarea { - transition: all 0.2s ease-in-out; + transition: color, background-color, border-color, box-shadow, transform 0.2s ease-in-out; }
1-1: Stylelint prefers string notation for@import.The linter flags
url('...')and expects a bare string. This is a minor lint compliance nit.Proposed fix
-@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+3:wght@400;600;700&display=swap'); +@import 'https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Big+Shoulders+Display:wght@700;900&family=Roboto+Condensed:wght@400;700&family=Source+Sans+3:wght@400;600;700&display=swap';
102-109: Blanketfont-weight: 600onp, span, div, a, liis heavy-handed.This overrides the natural weight of virtually every text element in the app, including third-party UI components. It can cause unexpected bold text in places like dropdown menus, tooltips, and form labels. Consider scoping this to a specific class (e.g.,
.pulp-text) or removing it and applyingfont-semiboldwhere actually needed.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Functional issues / UX regressions
Layout & visual polish
Performance – background animation
|
Drago-03
left a comment
Drago-03
left a comment
There was a problem hiding this comment.
Updated with the requested changes
|
I'll commit the requested changes ASAP. |
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/galaxy-background.tsx (1)
168-266:⚠️ Potential issue | 🟠 MajorMeteors still use heavy framer-motion animations — reviewer's perf concern persists.
The reviewer specifically flagged that the animated background "significantly impacts performance, particularly on machines without GPU acceleration" and recommended replacing it with a static noir/halftone background. While stars were converted to static elements, the meteors (up to 12 on desktop + 3 large meteors) still run continuous framer-motion animations with
repeat: Infinity. Each meteor also spawns two animatedmotion.divchildren (head + tail), totaling up to ~30 continuously animating elements.Additionally,
Math.random()is called during render (lines 169, 171, 187–188, 198, 200–201) to compute animation props. Since these values aren't memoized, every re-render (e.g., window resize) produces different random values, causing visual inconsistency and unnecessary layout recalculations.Consider either:
- Removing meteors entirely per reviewer guidance, relying on the static halftone/noir overlays already present in the hero sections
- Or at minimum, memoizing meteor data similar to
starsand gating animations behind!prefersReducedMotion
🤖 Fix all issues with AI agents
In `@components/home/hero-section.tsx`:
- Around line 27-34: The hero panels use the same external Google image URL for
both <img> elements (alt "Noir Action Hero" in the first <img> and "Gritty Urban
Landscape" in the second), which is likely a copy/paste mistake and creates a
fragile runtime dependency; update the two <img> src attributes in
components/home/hero-section.tsx so each panel points to the correct distinct
asset (preferably a locally checked-in image or a stable CDN you control rather
than the lh3.googleusercontent.com URL), and ensure the alt text matches the
intended image for the elements rendering the hero panels.
- Around line 183-184: The h2 element with className containing "text-[8rem]
md:text-[9rem] lg:text-[10rem] ..." uses 8rem as the base size which will
overflow on small mobiles; change the base utility to a much smaller
mobile-first size (for example replace text-[8rem] with a mobile-safe class such
as text-[3.5rem] or text-5xl) and then promote the large sizes at breakpoints
(e.g., sm:text-[8rem] md:text-[9rem] lg:text-[10rem]) so the h2 (the BOOM!
heading) scales down on narrow viewports while keeping the existing larger sizes
on tablets/desktop.
- Around line 92-111: Replace the plain anchor that navigates to
"/create/ai-story" with Next.js client-side navigation: import Link from
'next/link' and wrap the CTA so it uses the Link component for
href="/create/ai-story" instead of a raw <a>, remove the inline
onMouseEnter/onMouseLeave handlers, and move the hover/pressed styling into
Tailwind classes on the element (e.g., bg-[`#8B0000`] hover:bg-[`#660000`]
shadow-[6px_6px_0_#000] hover:shadow-[8px_8px_0_#000] text-[`#E5E5E5`] uppercase
font-bold px-12 py-4) so the "CREATE STORY" CTA uses CSS :hover and avoids full
page reloads and fragile inline event state.
🧹 Nitpick comments (5)
app/globals.css (3)
146-178: Hardcoded hex values in component classes bypass the centralized:roottokens.The
.action-buttonand.comic-cardclasses use literal hex values (#050505,#8B0000,#E5E5E5) and a hardcodedfont-familyinstead of the CSS variables defined in:root. This undermines the token consolidation goal stated in the PR.For example:
.action-button { - background-color: var(--primary); + /* already correct */ ... - border: 2px solid `#050505`; + border: 2px solid var(--color-pulp-black); ... - font-family: 'Permanent Marker', cursive; + font-family: var(--font-display); } .comic-card { - background-color: `#E5E5E5`; - color: `#050505`; + background-color: var(--color-pulp-pure); + color: var(--color-pulp-black); ... - box-shadow: 4px 4px 0px `#8B0000`; + box-shadow: 4px 4px 0px var(--primary); }
96-99:::selectionuses hardcoded hex instead of tokens.Minor inconsistency — use
var(--primary)andvar(--foreground)to stay consistent with the token-first approach.::selection { - background-color: `#8B0000`; - color: `#E5E5E5`; + background-color: var(--primary); + color: var(--foreground); }
237-239:.comic-card:hoverin@layer utilitiesconflicts with.comic-cardin@layer components.The past review flagged this conflict and it was marked as addressed, but both rules still exist:
.comic-cardincomponents(line 170) definesbox-shadow: 4px 4px 0px#8B0000``, while.comic-card:hoverin `utilities` (line 237) triggers `comic-glow` which sets `box-shadow: 6px 6px 0px 0px var(--foreground)`. The shadow colors differ (`#8B0000` vs `var(--foreground)`), and the hover animation replaces the base shadow entirely on the first keyframe. Consolidate hover behavior in one layer.components/home/cta-section.tsx (1)
7-101: Pervasive hardcoded hex values — same token-bypass pattern as globals.css.This component hardcodes
#8B0000,#050505,#E5E5E5,#000throughout inline styles instead of referencing CSS variables (var(--primary),var(--color-pulp-black),var(--color-pulp-pure)). This makes future theme changes require touching every component individually.components/home/hero-section.tsx (1)
5-8:isConnectedprop is accepted but never used.The
isConnectedproperty is declared inHeroSectionPropsand destructured but not referenced anywhere in the component. Remove it to avoid confusion.Proposed fix
interface HeroSectionProps { connectWallet?: () => Promise<void>; - isConnected?: boolean; } export function HeroSection({ connectWallet, - isConnected = false, }: HeroSectionProps) {
| <img | ||
| alt="Noir Action Hero" | ||
| src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzHu79NVYgya5Cj8BACNCEvQU1WzneTRWADEYopkZtri6Df2onMzvLLhPRwhswLUGSfwLJocrlpjEgN0K_4fYns1eFJT1du1QBr7pJuM3N3CmaY6w-q-ACgCqIwV5xZrgPgoIBkhvldOntQdwEF6_ycFRWfor09_XNcxh2ZZiK7PX8_z2e1PI0E4TvDz4AiJU1YbcUjHyT4WTcYR8vtjm85TjaRt-2T6sdM71unJAvSKNXabOATDjHsz0W6rwF7pqT0uWF67u2US4" | ||
| className="w-full h-full object-cover" | ||
| style={{ | ||
| filter: 'grayscale(1) brightness(0.3) contrast(1.5) sepia(0.2)', | ||
| }} | ||
| /> |
There was a problem hiding this comment.
Same external image URL used for both hero panels — likely unintentional.
Both Panel 1 (line 29) and Panel 2 (line 153) reference the identical lh3.googleusercontent.com URL despite having different alt text ("Noir Action Hero" vs "Gritty Urban Landscape"). This looks like a copy-paste oversight. Also, relying on external Google URLs introduces a runtime dependency — if Google changes the URL pattern, both backgrounds break. Consider using local assets or a CDN you control.
Also applies to: 150-158
🤖 Prompt for AI Agents
In `@components/home/hero-section.tsx` around lines 27 - 34, The hero panels use
the same external Google image URL for both <img> elements (alt "Noir Action
Hero" in the first <img> and "Gritty Urban Landscape" in the second), which is
likely a copy/paste mistake and creates a fragile runtime dependency; update the
two <img> src attributes in components/home/hero-section.tsx so each panel
points to the correct distinct asset (preferably a locally checked-in image or a
stable CDN you control rather than the lh3.googleusercontent.com URL), and
ensure the alt text matches the intended image for the elements rendering the
hero panels.
| <a | ||
| href="/create/ai-story" | ||
| className="font-display text-lg md:text-xl px-12 py-4 uppercase font-bold cursor-pointer transition-all" | ||
| style={{ | ||
| backgroundColor: '#8B0000', | ||
| color: '#E5E5E5', | ||
| border: 'none', | ||
| boxShadow: '6px 6px 0px #000', | ||
| }} | ||
| onMouseEnter={(e) => { | ||
| e.currentTarget.style.backgroundColor = '#660000'; | ||
| e.currentTarget.style.boxShadow = '8px 8px 0px #000'; | ||
| }} | ||
| onMouseLeave={(e) => { | ||
| e.currentTarget.style.backgroundColor = '#8B0000'; | ||
| e.currentTarget.style.boxShadow = '6px 6px 0px #000'; | ||
| }} | ||
| > | ||
| CREATE STORY | ||
| </a> |
There was a problem hiding this comment.
Use Next.js <Link> for internal /create/ai-story navigation.
Same issue as in cta-section.tsx — <a> causes a full page reload. Additionally, the inline onMouseEnter/onMouseLeave handlers for hover styles are unnecessary and fragile (state doesn't reset if the user tabs away). Use CSS :hover via Tailwind classes instead.
Proposed fix
Add the import:
import Link from 'next/link';- <a
+ <Link
href="/create/ai-story"
- className="font-display text-lg md:text-xl px-12 py-4 uppercase font-bold cursor-pointer transition-all"
- style={{
- backgroundColor: '#8B0000',
- color: '#E5E5E5',
- border: 'none',
- boxShadow: '6px 6px 0px `#000`',
- }}
- onMouseEnter={(e) => {
- e.currentTarget.style.backgroundColor = '#660000';
- e.currentTarget.style.boxShadow = '8px 8px 0px `#000`';
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.backgroundColor = '#8B0000';
- e.currentTarget.style.boxShadow = '6px 6px 0px `#000`';
- }}
+ className="font-display text-lg md:text-xl px-12 py-4 uppercase font-bold cursor-pointer transition-all bg-primary text-foreground hover:bg-[`#660000`] shadow-[6px_6px_0px_#000] hover:shadow-[8px_8px_0px_#000]"
>
CREATE STORY
- </a>
+ </Link>🤖 Prompt for AI Agents
In `@components/home/hero-section.tsx` around lines 92 - 111, Replace the plain
anchor that navigates to "/create/ai-story" with Next.js client-side navigation:
import Link from 'next/link' and wrap the CTA so it uses the Link component for
href="/create/ai-story" instead of a raw <a>, remove the inline
onMouseEnter/onMouseLeave handlers, and move the hover/pressed styling into
Tailwind classes on the element (e.g., bg-[`#8B0000`] hover:bg-[`#660000`]
shadow-[6px_6px_0_#000] hover:shadow-[8px_8px_0_#000] text-[`#E5E5E5`] uppercase
font-bold px-12 py-4) so the "CREATE STORY" CTA uses CSS :hover and avoids full
page reloads and fragile inline event state.
|
When I click “CONNECT WALLET” on the new homepage, it no longer opens the installed wallet / wallet options. Instead, it throws:
This worked in the previous production codebase, so the refactor has effectively broken the existing wallet integration. Wire the hero & header wallet button back to the real web3 provider logic so users can actually connect their wallets again like earlier. |
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (3)
app/landing/page.tsx (2)
39-49: ArbitrarysetTimeoutredirect is fragile.The 1-second delay before
router.push('/')has no relationship to actual connection completion —web3Connect()already awaited above. If the connection is fast, the user stares at a blank second; if something else is slow, it may redirect prematurely. Either redirect immediately afterawaitor react toconnectedstate change via auseEffect.Simpler approach — redirect immediately
const handleConnectWallet = async () => { try { await web3Connect(); - // Redirect to home page after successful login - setTimeout(() => { - router.push('/'); - }, 1000); + router.push('/'); } catch (error) { console.error('Error connecting wallet:', error); } };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/landing/page.tsx` around lines 39 - 49, The current handleConnectWallet uses an arbitrary setTimeout before calling router.push('/') which is fragile; remove the setTimeout and redirect immediately after awaiting web3Connect() (i.e., call router.push('/') right after await web3Connect()), or alternatively wire a useEffect that listens to the connection state (e.g., connected or whatever value web3Connect sets) and calls router.push('/') when that state becomes true; update handleConnectWallet, useEffect, and references to web3Connect/connected/router.push accordingly so the redirect occurs deterministically.
27-27:connectedis destructured but never used; preferconnectedoveraccountfor the auth check.
connectedis extracted fromuseWeb3()but unused. Meanwhile, line 86 checksweb3Account(i.e.,account) to decide if the user is connected. Usingconnectedis semantically clearer and avoids relying onaccountbeing truthy as a proxy for connection state, which may diverge (e.g., during disconnection or when the fallback context is active).Proposed fix
- const { connectWallet: web3Connect, connecting, connected, account: web3Account } = useWeb3(); + const { connectWallet: web3Connect, connecting, connected } = useWeb3();Then on line 86:
- {web3Account ? ( + {connected ? (🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/landing/page.tsx` at line 27, The code destructures connected from useWeb3() but continues to use web3Account for connection checks; update the auth check to use connected instead of web3Account to reflect actual connection state. Locate the useWeb3() destructure (web3Connect, connecting, connected, web3Account) and replace places where web3Account is used to gate UI/auth behavior with connected (e.g., the conditional that currently reads something like if (web3Account) or similar), keeping web3Account available for displaying the address but using connected for boolean connection logic.components/header.tsx (1)
20-21: Prefer Tailwind utility over inlinestylefor background color.
style={{ backgroundColor: '#000000' }}on lines 20 and 61 can be replaced with the Tailwind classbg-blackfor consistency with the rest of the styling approach. Inline styles bypass Tailwind's purging and override chain.Also applies to: 60-61
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/header.tsx` around lines 20 - 21, Replace the inline style backgroundColor usage with the Tailwind utility class: remove style={{ backgroundColor: '#000000' }} from the header element that has className "sticky top-0 z-50 border-b-4 border-black" and add "bg-black" to its className; do the same for the second occurrence around lines 60-61 (the other header/footer element) so both use the Tailwind bg-black class instead of inline styles.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/landing/page.tsx`:
- Around line 46-48: The catch block in the web3Connect() call in page.tsx only
logs errors to console, leaving users uninformed; update the wallet connection
error handling to surface the failure to the user by invoking a UI-visible
notification (e.g., a toast) or setting an inline error state. Specifically, in
the try/catch around web3Connect() (the handler wired to the "CONNECT WALLET"
button), capture the caught error, call your toast utility (or set a React state
like connectionError via useState) with a user-friendly message plus optional
error.message for debugging, and ensure the component renders the toast or
displays the inline error so the user sees the failure. Ensure existing function
names web3Connect() and the button click handler remain unchanged while adding
the notification/state update in the catch branch.
- Around line 104-106: The button currently renders the full-screen
LoadingAnimation (which has min-h-[200px]) when connecting, inflating the
button; in the conditional inside the Button in page.tsx replace the
LoadingAnimation usage with a compact inline spinner like the one used in
ConnectWalletButton (reuse its small spinner markup/CSS or extract that spinner
into a small InlineSpinner component) so the button shows a 16×16 spinner and no
large min-height; ensure you only swap the rendered component inside the
connecting ? (...) branch and do not change the surrounding button markup or
props.
In `@app/page.tsx`:
- Around line 7-11: The HeroSection is always receiving isConnected={false}
because only connectWallet is destructured from useWeb3(); update the
destructuring to pull both connectWallet and connected from useWeb3() and pass
connected into HeroSection (isConnected={connected}) so the UI reflects the
actual wallet state; ensure any renaming matches existing symbols (useWeb3,
connectWallet, connected, HeroSection).
In `@components/connect-wallet-button.tsx`:
- Around line 19-41: The ConnectWalletButton currently ignores useWeb3()'s
connected/account state; update the ConnectWalletButton component to read
connected and account from useWeb3() (in addition to connecting/connectWallet)
and switch its UI: when connected show a non-clickable state (or hide the
button) that displays the truncated account (e.g. first 6/last 4 chars) and
remove the onClick/disabling behavior, otherwise keep the existing Connect
Wallet UI and onClick handler; reference the ConnectWalletButton function,
useWeb3() hook, connected/account properties, and connectWallet handler when
making the change.
In `@components/header.tsx`:
- Around line 11-17: navItems currently includes routes '/nft-gallery' and
'/nft-marketplace' that don't exist; update the navItems array (and the header
navigation rendering that consumes it) to either remove those two entries or
mark them as disabled/coming-soon: change their objects to include a flag like {
href: '#', label: 'NFT GALLERY (Coming soon)', disabled: true } (or simply drop
the entries), then update the header's link rendering logic (the component that
maps navItems) to render disabled entries as non-clickable (no navigation), add
aria-disabled="true" and a visual "Coming soon" indicator or tooltip, and ensure
click/keyboard handlers prevent navigation for disabled items.
- Around line 43-44: The desktop ConnectWalletButton is rendered outside the
responsive wrapper causing a duplicate on mobile; wrap or move the
<ConnectWalletButton /> instance into the same responsive container (the element
using the hidden md:flex classes) or add the responsive classes (hidden md:flex)
to that button so it is hidden on small screens while the dropdown instance
remains visible; update the JSX in header.tsx where ConnectWalletButton is
rendered to ensure only the dropdown version is shown on mobile.
---
Nitpick comments:
In `@app/landing/page.tsx`:
- Around line 39-49: The current handleConnectWallet uses an arbitrary
setTimeout before calling router.push('/') which is fragile; remove the
setTimeout and redirect immediately after awaiting web3Connect() (i.e., call
router.push('/') right after await web3Connect()), or alternatively wire a
useEffect that listens to the connection state (e.g., connected or whatever
value web3Connect sets) and calls router.push('/') when that state becomes true;
update handleConnectWallet, useEffect, and references to
web3Connect/connected/router.push accordingly so the redirect occurs
deterministically.
- Line 27: The code destructures connected from useWeb3() but continues to use
web3Account for connection checks; update the auth check to use connected
instead of web3Account to reflect actual connection state. Locate the useWeb3()
destructure (web3Connect, connecting, connected, web3Account) and replace places
where web3Account is used to gate UI/auth behavior with connected (e.g., the
conditional that currently reads something like if (web3Account) or similar),
keeping web3Account available for displaying the address but using connected for
boolean connection logic.
In `@components/header.tsx`:
- Around line 20-21: Replace the inline style backgroundColor usage with the
Tailwind utility class: remove style={{ backgroundColor: '#000000' }} from the
header element that has className "sticky top-0 z-50 border-b-4 border-black"
and add "bg-black" to its className; do the same for the second occurrence
around lines 60-61 (the other header/footer element) so both use the Tailwind
bg-black class instead of inline styles.
| } catch (error) { | ||
| console.error('Error connecting to MetaMask', error); | ||
| alert('Failed to connect to MetaMask.'); | ||
| } finally { | ||
| setIsConnecting(false); | ||
| console.error('Error connecting wallet:', error); | ||
| } |
There was a problem hiding this comment.
Wallet connection errors are silently swallowed.
When web3Connect() throws, the error is logged to the console but the user gets no feedback. This matches the PR comment from reviewer Drago-03 noting that clicking "CONNECT WALLET" gives no visible error. Consider showing a toast or inline error message so the user knows connection failed.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/landing/page.tsx` around lines 46 - 48, The catch block in the
web3Connect() call in page.tsx only logs errors to console, leaving users
uninformed; update the wallet connection error handling to surface the failure
to the user by invoking a UI-visible notification (e.g., a toast) or setting an
inline error state. Specifically, in the try/catch around web3Connect() (the
handler wired to the "CONNECT WALLET" button), capture the caught error, call
your toast utility (or set a React state like connectionError via useState) with
a user-friendly message plus optional error.message for debugging, and ensure
the component renders the toast or displays the inline error so the user sees
the failure. Ensure existing function names web3Connect() and the button click
handler remain unchanged while adding the notification/state update in the catch
branch.
| {connecting ? ( | ||
| <LoadingAnimation message="Connecting..." /> | ||
| ) : ( |
There was a problem hiding this comment.
LoadingAnimation inside a <Button> will break layout.
LoadingAnimation renders a container with min-h-[200px] and a 16×16 spinner (see components/loading-animation.tsx lines 15-27). Embedding it inside a button will massively inflate the button's height, breaking the hero layout during the connecting state.
Use an inline spinner instead, similar to what ConnectWalletButton does:
Proposed fix
- {connecting ? (
- <LoadingAnimation message="Connecting..." />
- ) : (
+ {connecting ? (
+ <>
+ <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white" />
+ <span>Connecting...</span>
+ </>
+ ) : (📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {connecting ? ( | |
| <LoadingAnimation message="Connecting..." /> | |
| ) : ( | |
| {connecting ? ( | |
| <> | |
| <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white" /> | |
| <span>Connecting...</span> | |
| </> | |
| ) : ( |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/landing/page.tsx` around lines 104 - 106, The button currently renders
the full-screen LoadingAnimation (which has min-h-[200px]) when connecting,
inflating the button; in the conditional inside the Button in page.tsx replace
the LoadingAnimation usage with a compact inline spinner like the one used in
ConnectWalletButton (reuse its small spinner markup/CSS or extract that spinner
into a small InlineSpinner component) so the button shows a 16×16 spinner and no
large min-height; ensure you only swap the rendered component inside the
connecting ? (...) branch and do not change the surrounding button markup or
props.
| const { connectWallet } = useWeb3(); | ||
|
|
||
| return ( | ||
| <main className="flex min-h-screen flex-col relative bg-yellow-50 dark:dark-premium-bg overflow-hidden transition-colors duration-500"> | ||
| {/* Premium Background Glows for Dark Mode */} | ||
| <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-0 dark:opacity-100 transition-opacity duration-1000"> | ||
| <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/10 blur-[120px] rounded-full" /> | ||
| <div className="absolute top-[20%] right-[-10%] w-[35%] h-[35%] bg-purple-600/10 blur-[120px] rounded-full" /> | ||
| <div className="absolute bottom-[-10%] left-[20%] w-[40%] h-[40%] bg-indigo-600/10 blur-[120px] rounded-full" /> | ||
| </div> | ||
|
|
||
| {/* Comic Halftone Background Overlay */} | ||
| <div className="absolute inset-0 bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:20px_20px] opacity-[0.03] pointer-events-none" /> | ||
|
|
||
| {/* Hero Section */} | ||
| <section className="relative py-24 border-b-8 border-foreground bg-yellow-400 dark:bg-slate-900/80 dark:backdrop-blur-sm overflow-hidden transition-colors duration-500"> | ||
| <div className="container mx-auto px-4 relative z-10"> | ||
| <div className="flex flex-col lg:flex-row items-center gap-12"> | ||
| <div className="lg:w-1/2 space-y-8"> | ||
| <motion.div | ||
| initial={false} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| className="inline-block bg-card border-4 border-foreground px-6 py-3 shadow-[8px_8px_0px_0px_var(--shadow-color)] transform -rotate-2" | ||
| > | ||
| <span className="font-black text-xl md:text-2xl text-foreground uppercase tracking-widest"> | ||
| The Future of Storytelling | ||
| </span> | ||
| </motion.div> | ||
|
|
||
| <motion.h1 | ||
| initial={false} | ||
| animate={{ opacity: 1, x: 0 }} | ||
| transition={{ delay: 0.2 }} | ||
| className="text-6xl md:text-8xl font-black text-foreground uppercase leading-none [text-shadow:4px_4px_0px_#fff,8px_8px_0px_#000] dark:[text-shadow:0_0_15px_rgba(59,130,246,0.4),0_0_30px_rgba(139,92,246,0.2)]" | ||
| > | ||
| Create <br /> | ||
| <span className="text-white dark:bg-gradient-to-r dark:from-cyan-400 dark:to-blue-500 dark:bg-clip-text dark:text-transparent [text-shadow:4px_4px_0px_#000] dark:[text-shadow:none] dark:drop-shadow-[0_0_12px_rgba(34,211,238,0.6)]"> | ||
| Mint | ||
| </span>{' '} | ||
| <br />& Share | ||
| </motion.h1> | ||
|
|
||
| <motion.p | ||
| initial={false} | ||
| animate={{ opacity: 1 }} | ||
| transition={{ delay: 0.4 }} | ||
| className="text-2xl font-bold text-foreground border-l-8 border-foreground pl-6 py-4 bg-card/80 shadow-[4px_4px_0px_0px_var(--shadow-color)]" | ||
| > | ||
| Unleash your imagination with AI. Turn your stories into | ||
| valuable NFTs on the Monad blockchain. | ||
| </motion.p> | ||
|
|
||
| <motion.div | ||
| initial={false} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ delay: 0.6 }} | ||
| className="flex flex-wrap gap-6 pt-4" | ||
| > | ||
| <Link href="/create/ai-story"> | ||
| <Button | ||
| size="lg" | ||
| className="bg-red-500 text-white border-4 border-foreground shadow-[8px_8px_0px_0px_var(--shadow-color)] hover:shadow-[12px_12px_0px_0px_var(--shadow-color)] hover:-translate-y-1 transition-all text-xl font-black uppercase px-8 py-6 h-auto rounded-none" | ||
| > | ||
| <PenSquare className="mr-3 h-6 w-6" /> | ||
| Start Creating | ||
| </Button> | ||
| </Link> | ||
|
|
||
| {!account && ( | ||
| <Button | ||
| onClick={connectWallet} | ||
| size="lg" | ||
| className="bg-card text-foreground border-4 border-foreground shadow-[8px_8px_0px_0px_var(--shadow-color)] hover:shadow-[12px_12px_0px_0px_var(--shadow-color)] hover:-translate-y-1 transition-all text-xl font-black uppercase px-8 py-6 h-auto rounded-none" | ||
| > | ||
| <Wallet className="mr-3 h-6 w-6" /> | ||
| Connect Wallet | ||
| </Button> | ||
| )} | ||
| </motion.div> | ||
| </div> | ||
|
|
||
| <div className="lg:w-1/2 relative"> | ||
| <motion.div | ||
| animate={{ rotate: [2, -2, 2] }} | ||
| transition={{ | ||
| repeat: Infinity, | ||
| duration: 5, | ||
| ease: 'easeInOut', | ||
| }} | ||
| className="relative z-10" | ||
| > | ||
| <div className="bg-card border-8 border-foreground p-4 shadow-[20px_20px_0px_0px_var(--shadow-color)]"> | ||
| <div className="aspect-square relative overflow-hidden border-4 border-foreground bg-blue-400 dark:bg-blue-600"> | ||
| <div className="absolute inset-0 flex items-center justify-center"> | ||
| <Rocket className="w-32 h-32 text-white animate-bounce" /> | ||
| </div> | ||
| {/* Comic Speech Bubble */} | ||
| <div className="absolute -top-6 -right-6 bg-card border-4 border-foreground px-6 py-4 rounded-[50%] shadow-[8px_8px_0px_0px_var(--shadow-color)] z-20"> | ||
| <span className="font-black text-2xl text-foreground"> | ||
| BOOM! | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div className="mt-4 border-t-4 border-foreground pt-4"> | ||
| <h3 className="text-3xl font-black uppercase"> | ||
| AI Powered | ||
| </h3> | ||
| <p className="font-bold text-lg"> | ||
| Generate stories in seconds! | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </motion.div> | ||
|
|
||
| {/* Decorative Elements */} | ||
| <Star className="absolute top-0 right-0 w-12 h-12 text-yellow-400 fill-current stroke-foreground stroke-2 animate-spin-slow" /> | ||
| <Zap className="absolute bottom-0 left-0 w-16 h-16 text-blue-500 fill-current stroke-foreground stroke-2 animate-pulse" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| {/* Features Grid */} | ||
| <section className="py-20 bg-card dark:bg-slate-900/40 dark:backdrop-blur-md border-b-8 border-foreground transition-colors duration-500"> | ||
| <div className="container mx-auto px-4"> | ||
| <div className="text-center mb-16"> | ||
| <h2 className="text-5xl md:text-7xl font-black uppercase mb-4 bg-gradient-to-r from-slate-900 via-slate-700 to-slate-900 dark:from-white dark:via-slate-300 dark:to-white bg-clip-text text-transparent [text-shadow:4px_4px_0px_rgba(0,0,0,0.05)] dark:[text-shadow:4px_4px_0px_rgba(255,255,255,0.05)]"> | ||
| Why GroqTales? | ||
| </h2> | ||
| </div> | ||
|
|
||
| <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> | ||
| {[ | ||
| { | ||
| title: 'AI Generation', | ||
| desc: 'Powered by Groq for lightning-fast story creation.', | ||
| icon: <Zap className="w-12 h-12" />, | ||
| color: 'bg-cyan-300 dark:bg-cyan-900/30', | ||
| }, | ||
| { | ||
| title: 'NFT Ownership', | ||
| desc: 'Your stories are truly yours on the blockchain.', | ||
| icon: <Wallet className="w-12 h-12" />, | ||
| color: 'bg-pink-300 dark:bg-pink-900/30', | ||
| }, | ||
| { | ||
| title: 'Community', | ||
| desc: 'Read, share, and trade with other creators.', | ||
| icon: <Sparkles className="w-12 h-12" />, | ||
| color: 'bg-green-300 dark:bg-green-900/30', | ||
| }, | ||
| ].map((feature, i) => ( | ||
| <motion.div | ||
| key={i} | ||
| whileHover={{ scale: 1.05, rotate: 1 }} | ||
| className={`${feature.color} border-4 border-foreground p-8 shadow-[12px_12px_0px_0px_var(--shadow-color)]`} | ||
| > | ||
| <div className="bg-card border-4 border-foreground w-20 h-20 flex items-center justify-center mb-6 shadow-[4px_4px_0px_0px_var(--shadow-color)]"> | ||
| {feature.icon} | ||
| </div> | ||
| <h3 className="text-3xl font-black uppercase mb-4"> | ||
| {feature.title} | ||
| </h3> | ||
| <p className="text-xl font-bold border-l-4 border-foreground pl-4 bg-card/50 py-2"> | ||
| {feature.desc} | ||
| </p> | ||
| </motion.div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| {/* Trending Section */} | ||
| <section className="py-20 bg-pink-100 dark:bg-slate-900/60 dark:backdrop-blur-sm border-b-8 border-foreground transition-colors duration-500"> | ||
| <div className="container mx-auto px-4"> | ||
| <div className="flex flex-col gap-4 items-start mb-12 md:flex-row md:items-center md:justify-between"> | ||
| <h2 className="text-2xl md:text-4xl font-black uppercase bg-card border-4 border-foreground px-6 py-2 shadow-[6px_6px_0px_0px_var(--shadow-color)]"> | ||
| Trending Now | ||
| </h2> | ||
| <Link href="/nft-gallery"> | ||
| <Button className="w-full md:w-auto bg-black dark:bg-white dark:text-black text-white border-4 border-transparent hover:bg-gray-800 font-bold uppercase"> | ||
| View All <ArrowRight className="ml-2 w-4 h-4" /> | ||
| </Button> | ||
| </Link> | ||
| </div> | ||
| <TrendingStories /> | ||
| </div> | ||
| </section> | ||
|
|
||
| {/* CTA */} | ||
| <section className="py-24 bg-blue-600 dark:bg-indigo-950/80 dark:backdrop-blur-md border-b-8 border-foreground text-center transition-colors duration-500"> | ||
| <div className="container mx-auto px-4"> | ||
| <h2 className="text-4xl md:text-6xl lg:text-8xl font-black text-white uppercase mb-8 [text-shadow:6px_6px_0px_#000]"> | ||
| Ready to Start? | ||
| </h2> | ||
| <Link href="/create/ai-story"> | ||
| <Button className="w-full md:w-auto bg-yellow-400 dark:bg-yellow-600 text-foreground border-4 border-foreground text-lg md:text-2xl font-black uppercase px-6 md:px-12 py-4 md:py-8 h-auto shadow-[12px_12px_0px_0px_#000] hover:shadow-[16px_16px_0px_0px_#000] hover:-translate-y-1 transition-all rounded-none"> | ||
| Create Your Story | ||
| </Button> | ||
| </Link> | ||
| </div> | ||
| </section> | ||
| <main className="flex min-h-screen flex-col relative overflow-hidden"> | ||
| <HeroSection connectWallet={connectWallet} isConnected={false} /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's look at the current state of app/page.tsx
cat -n app/page.tsxRepository: IndieHub25/GroqTales
Length of output: 630
🏁 Script executed:
# Find and examine the web3-provider to see what useWeb3 exports
find . -name '*web3-provider*' -type f | head -20Repository: IndieHub25/GroqTales
Length of output: 951
🏁 Script executed:
# Search for useWeb3 hook definition
rg -n 'export.*useWeb3|function useWeb3|const useWeb3' --type=ts --type=tsxRepository: IndieHub25/GroqTales
Length of output: 91
🏁 Script executed:
# Check what HeroSection expects as props
rg -n 'interface.*HeroSection|type.*HeroSection|function HeroSection|const HeroSection' --type=ts --type=tsx -A 10Repository: IndieHub25/GroqTales
Length of output: 91
🏁 Script executed:
# Read the web3-provider.tsx file directly
cat -n ./components/providers/web3-provider.tsxRepository: IndieHub25/GroqTales
Length of output: 11240
🏁 Script executed:
# Search for HeroSection component definition
rg -n 'HeroSection' --type=typescript -A 15 | head -50Repository: IndieHub25/GroqTales
Length of output: 98
🏁 Script executed:
# Alternative: find and read home components
find ./components/home -type f -name '*.ts*' | head -20Repository: IndieHub25/GroqTales
Length of output: 316
🏁 Script executed:
# Read the HeroSection component to see what props it expects
cat -n ./components/home/hero-section.tsxRepository: IndieHub25/GroqTales
Length of output: 9927
isConnected is hardcoded to false — wallet state will never reflect in the UI.
useWeb3() exposes a connected property, but only connectWallet is destructured. The hero section will never show the connected state after a successful wallet connection.
Proposed fix
- const { connectWallet } = useWeb3();
+ const { connectWallet, connected } = useWeb3();- <HeroSection connectWallet={connectWallet} isConnected={false} />
+ <HeroSection connectWallet={connectWallet} isConnected={connected} />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { connectWallet } = useWeb3(); | |
| return ( | |
| <main className="flex min-h-screen flex-col relative bg-yellow-50 dark:dark-premium-bg overflow-hidden transition-colors duration-500"> | |
| {/* Premium Background Glows for Dark Mode */} | |
| <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-0 dark:opacity-100 transition-opacity duration-1000"> | |
| <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/10 blur-[120px] rounded-full" /> | |
| <div className="absolute top-[20%] right-[-10%] w-[35%] h-[35%] bg-purple-600/10 blur-[120px] rounded-full" /> | |
| <div className="absolute bottom-[-10%] left-[20%] w-[40%] h-[40%] bg-indigo-600/10 blur-[120px] rounded-full" /> | |
| </div> | |
| {/* Comic Halftone Background Overlay */} | |
| <div className="absolute inset-0 bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:20px_20px] opacity-[0.03] pointer-events-none" /> | |
| {/* Hero Section */} | |
| <section className="relative py-24 border-b-8 border-foreground bg-yellow-400 dark:bg-slate-900/80 dark:backdrop-blur-sm overflow-hidden transition-colors duration-500"> | |
| <div className="container mx-auto px-4 relative z-10"> | |
| <div className="flex flex-col lg:flex-row items-center gap-12"> | |
| <div className="lg:w-1/2 space-y-8"> | |
| <motion.div | |
| initial={false} | |
| animate={{ opacity: 1, y: 0 }} | |
| className="inline-block bg-card border-4 border-foreground px-6 py-3 shadow-[8px_8px_0px_0px_var(--shadow-color)] transform -rotate-2" | |
| > | |
| <span className="font-black text-xl md:text-2xl text-foreground uppercase tracking-widest"> | |
| The Future of Storytelling | |
| </span> | |
| </motion.div> | |
| <motion.h1 | |
| initial={false} | |
| animate={{ opacity: 1, x: 0 }} | |
| transition={{ delay: 0.2 }} | |
| className="text-6xl md:text-8xl font-black text-foreground uppercase leading-none [text-shadow:4px_4px_0px_#fff,8px_8px_0px_#000] dark:[text-shadow:0_0_15px_rgba(59,130,246,0.4),0_0_30px_rgba(139,92,246,0.2)]" | |
| > | |
| Create <br /> | |
| <span className="text-white dark:bg-gradient-to-r dark:from-cyan-400 dark:to-blue-500 dark:bg-clip-text dark:text-transparent [text-shadow:4px_4px_0px_#000] dark:[text-shadow:none] dark:drop-shadow-[0_0_12px_rgba(34,211,238,0.6)]"> | |
| Mint | |
| </span>{' '} | |
| <br />& Share | |
| </motion.h1> | |
| <motion.p | |
| initial={false} | |
| animate={{ opacity: 1 }} | |
| transition={{ delay: 0.4 }} | |
| className="text-2xl font-bold text-foreground border-l-8 border-foreground pl-6 py-4 bg-card/80 shadow-[4px_4px_0px_0px_var(--shadow-color)]" | |
| > | |
| Unleash your imagination with AI. Turn your stories into | |
| valuable NFTs on the Monad blockchain. | |
| </motion.p> | |
| <motion.div | |
| initial={false} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ delay: 0.6 }} | |
| className="flex flex-wrap gap-6 pt-4" | |
| > | |
| <Link href="/create/ai-story"> | |
| <Button | |
| size="lg" | |
| className="bg-red-500 text-white border-4 border-foreground shadow-[8px_8px_0px_0px_var(--shadow-color)] hover:shadow-[12px_12px_0px_0px_var(--shadow-color)] hover:-translate-y-1 transition-all text-xl font-black uppercase px-8 py-6 h-auto rounded-none" | |
| > | |
| <PenSquare className="mr-3 h-6 w-6" /> | |
| Start Creating | |
| </Button> | |
| </Link> | |
| {!account && ( | |
| <Button | |
| onClick={connectWallet} | |
| size="lg" | |
| className="bg-card text-foreground border-4 border-foreground shadow-[8px_8px_0px_0px_var(--shadow-color)] hover:shadow-[12px_12px_0px_0px_var(--shadow-color)] hover:-translate-y-1 transition-all text-xl font-black uppercase px-8 py-6 h-auto rounded-none" | |
| > | |
| <Wallet className="mr-3 h-6 w-6" /> | |
| Connect Wallet | |
| </Button> | |
| )} | |
| </motion.div> | |
| </div> | |
| <div className="lg:w-1/2 relative"> | |
| <motion.div | |
| animate={{ rotate: [2, -2, 2] }} | |
| transition={{ | |
| repeat: Infinity, | |
| duration: 5, | |
| ease: 'easeInOut', | |
| }} | |
| className="relative z-10" | |
| > | |
| <div className="bg-card border-8 border-foreground p-4 shadow-[20px_20px_0px_0px_var(--shadow-color)]"> | |
| <div className="aspect-square relative overflow-hidden border-4 border-foreground bg-blue-400 dark:bg-blue-600"> | |
| <div className="absolute inset-0 flex items-center justify-center"> | |
| <Rocket className="w-32 h-32 text-white animate-bounce" /> | |
| </div> | |
| {/* Comic Speech Bubble */} | |
| <div className="absolute -top-6 -right-6 bg-card border-4 border-foreground px-6 py-4 rounded-[50%] shadow-[8px_8px_0px_0px_var(--shadow-color)] z-20"> | |
| <span className="font-black text-2xl text-foreground"> | |
| BOOM! | |
| </span> | |
| </div> | |
| </div> | |
| <div className="mt-4 border-t-4 border-foreground pt-4"> | |
| <h3 className="text-3xl font-black uppercase"> | |
| AI Powered | |
| </h3> | |
| <p className="font-bold text-lg"> | |
| Generate stories in seconds! | |
| </p> | |
| </div> | |
| </div> | |
| </motion.div> | |
| {/* Decorative Elements */} | |
| <Star className="absolute top-0 right-0 w-12 h-12 text-yellow-400 fill-current stroke-foreground stroke-2 animate-spin-slow" /> | |
| <Zap className="absolute bottom-0 left-0 w-16 h-16 text-blue-500 fill-current stroke-foreground stroke-2 animate-pulse" /> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| {/* Features Grid */} | |
| <section className="py-20 bg-card dark:bg-slate-900/40 dark:backdrop-blur-md border-b-8 border-foreground transition-colors duration-500"> | |
| <div className="container mx-auto px-4"> | |
| <div className="text-center mb-16"> | |
| <h2 className="text-5xl md:text-7xl font-black uppercase mb-4 bg-gradient-to-r from-slate-900 via-slate-700 to-slate-900 dark:from-white dark:via-slate-300 dark:to-white bg-clip-text text-transparent [text-shadow:4px_4px_0px_rgba(0,0,0,0.05)] dark:[text-shadow:4px_4px_0px_rgba(255,255,255,0.05)]"> | |
| Why GroqTales? | |
| </h2> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| {[ | |
| { | |
| title: 'AI Generation', | |
| desc: 'Powered by Groq for lightning-fast story creation.', | |
| icon: <Zap className="w-12 h-12" />, | |
| color: 'bg-cyan-300 dark:bg-cyan-900/30', | |
| }, | |
| { | |
| title: 'NFT Ownership', | |
| desc: 'Your stories are truly yours on the blockchain.', | |
| icon: <Wallet className="w-12 h-12" />, | |
| color: 'bg-pink-300 dark:bg-pink-900/30', | |
| }, | |
| { | |
| title: 'Community', | |
| desc: 'Read, share, and trade with other creators.', | |
| icon: <Sparkles className="w-12 h-12" />, | |
| color: 'bg-green-300 dark:bg-green-900/30', | |
| }, | |
| ].map((feature, i) => ( | |
| <motion.div | |
| key={i} | |
| whileHover={{ scale: 1.05, rotate: 1 }} | |
| className={`${feature.color} border-4 border-foreground p-8 shadow-[12px_12px_0px_0px_var(--shadow-color)]`} | |
| > | |
| <div className="bg-card border-4 border-foreground w-20 h-20 flex items-center justify-center mb-6 shadow-[4px_4px_0px_0px_var(--shadow-color)]"> | |
| {feature.icon} | |
| </div> | |
| <h3 className="text-3xl font-black uppercase mb-4"> | |
| {feature.title} | |
| </h3> | |
| <p className="text-xl font-bold border-l-4 border-foreground pl-4 bg-card/50 py-2"> | |
| {feature.desc} | |
| </p> | |
| </motion.div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| {/* Trending Section */} | |
| <section className="py-20 bg-pink-100 dark:bg-slate-900/60 dark:backdrop-blur-sm border-b-8 border-foreground transition-colors duration-500"> | |
| <div className="container mx-auto px-4"> | |
| <div className="flex flex-col gap-4 items-start mb-12 md:flex-row md:items-center md:justify-between"> | |
| <h2 className="text-2xl md:text-4xl font-black uppercase bg-card border-4 border-foreground px-6 py-2 shadow-[6px_6px_0px_0px_var(--shadow-color)]"> | |
| Trending Now | |
| </h2> | |
| <Link href="/nft-gallery"> | |
| <Button className="w-full md:w-auto bg-black dark:bg-white dark:text-black text-white border-4 border-transparent hover:bg-gray-800 font-bold uppercase"> | |
| View All <ArrowRight className="ml-2 w-4 h-4" /> | |
| </Button> | |
| </Link> | |
| </div> | |
| <TrendingStories /> | |
| </div> | |
| </section> | |
| {/* CTA */} | |
| <section className="py-24 bg-blue-600 dark:bg-indigo-950/80 dark:backdrop-blur-md border-b-8 border-foreground text-center transition-colors duration-500"> | |
| <div className="container mx-auto px-4"> | |
| <h2 className="text-4xl md:text-6xl lg:text-8xl font-black text-white uppercase mb-8 [text-shadow:6px_6px_0px_#000]"> | |
| Ready to Start? | |
| </h2> | |
| <Link href="/create/ai-story"> | |
| <Button className="w-full md:w-auto bg-yellow-400 dark:bg-yellow-600 text-foreground border-4 border-foreground text-lg md:text-2xl font-black uppercase px-6 md:px-12 py-4 md:py-8 h-auto shadow-[12px_12px_0px_0px_#000] hover:shadow-[16px_16px_0px_0px_#000] hover:-translate-y-1 transition-all rounded-none"> | |
| Create Your Story | |
| </Button> | |
| </Link> | |
| </div> | |
| </section> | |
| <main className="flex min-h-screen flex-col relative overflow-hidden"> | |
| <HeroSection connectWallet={connectWallet} isConnected={false} /> | |
| const { connectWallet, connected } = useWeb3(); | |
| return ( | |
| <main className="flex min-h-screen flex-col relative overflow-hidden"> | |
| <HeroSection connectWallet={connectWallet} isConnected={connected} /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/page.tsx` around lines 7 - 11, The HeroSection is always receiving
isConnected={false} because only connectWallet is destructured from useWeb3();
update the destructuring to pull both connectWallet and connected from useWeb3()
and pass connected into HeroSection (isConnected={connected}) so the UI reflects
the actual wallet state; ensure any renaming matches existing symbols (useWeb3,
connectWallet, connected, HeroSection).
|
Right now the homepage refactor swaps in new wallet connection logic instead of reusing the existing web3/auth pipeline, so the wallet prompt appears but the downstream session/profile state is broken. For this PR, keep the new hero/header UI but revert the wallet/backend wiring (useWeb3 provider, connect-wallet button, landing flow, user-nav) back to the previous implementation and only pass the existing connectWallet/connected state into the new components. The behavior after connecting should match current production: wallet connects, session is established, and the user profile shows up in the header. |
|
Thanks for the clarification. I’ll revert the wallet/auth wiring to match production behavior and keep only the UI refactor. Will update the PR shortly. |
|
I have updated the new version of website, check that out and follow that using the hero section that way ( only the background image ) footer shall remain like it is in the current updated version. |
|
Ok |
2 participants
Closes #293
Summary by CodeRabbit
New Features
Style
Refactor
Accessibility