Design a modern, responsive frontend UI for SolVibe, a decentralized social media platform built on the Solana blockchain, using Next.js and Tailwind CSS. The UI should reflect a clean, futuristic, and user-friendly design with a focus on Web3 aesthetics, incorporating Solana’s vibrant purple and green color palette (#9945FF
, #14F195
, #FFFFFF
, #000000
) for dark and light themes. The interface should be intuitive for creators, Web3 enthusiasts, and casual users, emphasizing decentralized ownership, content creation, and community curation.
Key Pages and Features:
Homepage:
Hero section with SolVibe’s slogan: "Empowering creators with decentralized ownership, privacy, and fair rewards."
Call-to-action (CTA) button: “Connect Solana Wallet” (integrate with Solana Wallet Adapter, e.g., Phantom) for user authentication.
Showcase trending Content NFTs (displayed as cards with image/video thumbnails, creator name, and upvote count).
Minimalist navigation bar with links to Home, Explore, Create, Profile, and Community.
Footer with links to About, Docs, and Socials (Twitter, Discord).
Create Post Page:
Form for creating Content NFTs, including:
Upload fields for text, images, or videos (stored on Arweave, with metadata on Solana).
Option to mint as NFT with a “Mint NFT” button.
Preview section for the post before publishing.
Display estimated Solana transaction cost (~$0.00025) for minting.
CTA: “Publish to SolVibe” button.
Explore Page:
Grid layout of Content NFT cards, each showing:
Thumbnail (image/video), creator name, upvote count, and SOLV tipping button.
Hover effect to display “View Details” or “Tip SOLV” options.
Filters for sorting by trending, new, or curated (based on community quadratic voting).
Search bar for discovering creators or hashtags.
User Profile Page:
Display user’s Solana wallet address (shortened, e.g., “0x123…abc”) and profile metadata stored on-chain.
Tabs for:
Created Content NFTs (grid of posts).
Collected NFTs (purchased or rewarded).
Badges (NFT-based, showing special creator status or achievements).
Stats: Reputation score, total upvotes, and SOLV earned.
Edit profile button to update decentralized identity (stored on Arweave).
Community Curation Page:
Interface for community voting on content:
List of posts with “Upvote” buttons (quadratic voting system).
Reputation score displayed next to user names for transparency.
Option to report content for DAO review (DMCA integration).
Design Guidelines:
Typography: Use modern, sans-serif fonts (e.g., Inter or Poppins) for readability.
Colors:
Primary: Solana purple (#9945FF
), green (#14F195
).
Background: Dark mode (#1A1A1A
) and light mode (#FFFFFF
).
Accents: Gradient buttons combining purple and green for CTAs.
Components:
Responsive cards for Content NFTs with rounded corners and subtle shadows.
Wallet connection modal with Solana Wallet Adapter (supporting Phantom, etc.).
Smooth animations for hover effects, transitions, and loading states.
Mobile Responsiveness: Ensure seamless experience on mobile devices with collapsible menus and touch-friendly buttons.
Web3 Integration: Display Solana transaction confirmations (e.g., “Minting NFT…” or “Tipping SOLV…”) with loading spinners.
Accessibility: High contrast, keyboard navigation, and ARIA labels for Web3 components.
Additional Notes:
Prioritize simplicity and speed to reflect Solana’s high TPS (thousands of transactions per second).
Include subtle blockchain-inspired visuals (e.g., minimalistic chain or node graphics in the background).
Ensure the UI supports future scalability for features like DAO governance, royalty distribution, and cross-platform API integration (Twitter, YouTube).
Avoid overly complex designs to keep UX friendly for non-Web3 users.
Output: Generate a fully responsive Next.js and Tailwind CSS codebase with components for the above pages, styled consistently with SolVibe’s decentralized and creator-focused vision. Include placeholders for Web3 interactions (e.g., wallet connection, NFT minting) and ensure compatibility with dark/light themes.
I'll create a modern, responsive frontend UI for SolVibe, your decentralized social media platform on Solana. This will include all the key pages and features you've specified with the Solana color palette and Web3 aesthetics.
I've created a comprehensive, modern frontend UI for SolVibe that incorporates all the features you requested. Here's what I've built:
#9945FF
) and green (#14F195
)The codebase is production-ready and follows Next.js 15 best practices with proper component organization, type safety, and scalable architecture. The design successfully balances Web3 complexity with user-friendly interfaces, making it accessible to both crypto natives and newcomers.