Skip to content

feat: Redesign autocrat homepage with Figma-based layout#20

Open
jqmwa wants to merge 6 commits intoJejuNetwork:mainfrom
jqmwa:feat/eliza-character-quickstart
Open

feat: Redesign autocrat homepage with Figma-based layout#20
jqmwa wants to merge 6 commits intoJejuNetwork:mainfrom
jqmwa:feat/eliza-character-quickstart

Conversation

@jqmwa
Copy link

@jqmwa jqmwa commented Feb 4, 2026

Summary

  • Hero section redesign: Replaced generic gradient hero with a 336px Figma-spec hero featuring radial gradient background (purple/teal/blue), absolute-positioned "Create A DAO" button (top-right), "DAOs With AI Leadership / Community Center" title (left), centered play button, and "Help Guide" / "My DAOs" buttons (bottom-left)
  • Tab navigation: Replaced the search bar and filter controls with a sticky 3-tab bar (Overview, Proposals, Discussions) with a multi-color gradient active indicator (#ababe9 → #bbf9ab → #ababe9 → #ff26dc)
  • Left sidebar (400px, responsive hidden lg:block): Deposit Funds card, Account Balance card, gradient divider, App Card with blockchain/structure/members stats, and 6 styled navigation links (My DAOs, Wallet Activity, Airdrop, Help Guide, Settings, Report A Bug)
  • Referral banner: Gradient-bordered banner ("Invite Friends, Earn Rewards Up To 200 $AUTOCRATS Per Referral") with CSS mask technique for rounded gradient border
  • Feature cards row: 3 frosted-glass cards in a responsive grid — Explore DAOs (purple CTA), Create Your DAO (gold CTA), Education (green CTA) — each with icon, description, and full-width action button
  • Top Agents This Week: Horizontally scrollable row of 5 ranked agent cards (Eliza, Sponge, Jubi, Big Boy, Zhibti) with purple card backgrounds, text-outline rank numbers, and PNL stats
  • Featured DAOs showcase: Two static highlight cards (Humanitarian ECO DAO with green gradient header, EMBERQUILL STUDIOS with orange gradient header) plus dynamic DAO cards from fetched data

Test plan

  • Verify hero renders at 336px height with correct gradient and all buttons link correctly
  • Confirm tab navigation switches active state and gradient indicator follows the active tab
  • Check sidebar hides on screens below lg breakpoint and displays correctly on larger screens
  • Verify referral banner gradient border renders with rounded corners across browsers
  • Confirm all 3 feature cards display in a row on md+ and stack on mobile
  • Check Top Agents row scrolls horizontally with rank numbers showing outline text effect
  • Verify Featured DAOs section renders static showcase cards alongside dynamic DAO data
  • Test responsive layout across mobile, tablet, and desktop viewports

🤖 Generated with Claude Code

jqmwa and others added 6 commits February 4, 2026 17:00
Overhaul the DAOList homepage with a new design system translated from
Figma specifications, replacing the previous generic layout with a
purpose-built community center experience.

- Redesign hero section with radial gradient background, centered play
  button, and styled CTA buttons (Create A DAO, Help Guide, My DAOs)
- Replace search/filter bar with 3-tab navigation (Overview, Proposals,
  Discussions) featuring gradient active indicator
- Add left sidebar (400px) with Deposit Funds card, Account Balance
  card, App Card with blockchain stats, and 6 navigation links
- Add referral banner with gradient border and invite CTA
- Add 3 feature cards row (Explore DAOs, Create Your DAO, Education)
  with frosted glass styling and color-coded action buttons
- Add Top Agents This Week section with 5 ranked agent cards
- Add Featured DAOs showcase with Humanitarian ECO DAO and EMBERQUILL
  STUDIOS highlight cards alongside dynamic DAO data

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Major UI overhaul of DAOList page with comprehensive design system:

Homepage Layout:
- Redesigned hero section with radial gradient, play button, Help Guide CTA
- 3-tab navigation (Overview, Proposals, Discussions) with gradient indicator
- Left sidebar (400px) with wallet cards, Your DAOs section, Settings/Report Bug buttons
- Settings popup with side-tab navigation (My DAOs, Wallet, Airdrop, Help, Notifications)

Main Content Sections:
- Referral banner with gradient border
- Feature cards: Explore DAOs (380px with poptart mascot), Create DAO & Education stacked
- Top Agents This Week with character images (Eliza, Sponge, Jubi, Big Boy, Zhibti)
- Featured DAOs showcase cards

Tab Content:
- Proposals tab: 5 blockchain governance proposals with vote counts and progress bars
- Discussions tab: DAO selector and discussion threads with pinned indicators

Assets Added:
- Agent character images (eliza.png, sponge.png, jubi.png, bigboy.png, zhibti.png)
- Gradient divider line (autoline.png)
- Poptart mascot for Explore DAOs card (poptart.png)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace Explore DAOs link with a popup modal containing the Featured DAOs
section and search. Update navbar logo and Create DAO button to white
background with black text/icons.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace long expandable dropdown agent forms with compact 100x100 square
tiles. Clicking a tile opens a modal popup for editing. Changes are drafted
locally and saved on confirm. Also removes communication tone field, makes
agent name optional, and updates badge text to "Great for testing".

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ector image on review

- Add logo URL input with preview on Basics step
- Show logo in Review step DAO info when provided
- Replace Director gradient icon with Eliza image on Review step
- Add one-click Eliza preset for Board (Vault, Cipher, Echo agents)
- Add one-click Eliza Recommended Rules for Governance
- Add "or configure manually" dividers between presets and manual config

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant