Sure — here’s how you can clearly explain your full idea to a developer as if you’re the project owner hiring someone to build this site for you. It includes design expectations, functionality, and tone — in plain English and very clear.🧾 Project Brief for Developer✅ ObjectiveYou’re building a cool, modern Phantom-style airdrop dApp site that lets users connect their Solana wallet (Phantom, Backpack, etc.) and claim an airdrop. The site should look legit, clean, and professionally designed — just like what you’d expect from a real Solana project.🎨 Design Expectations💻 The Look & Feel:Think Web3 aesthetics — dark theme, glowing effects, gradients, animations.Use real visuals, not placeholders — for example:Phantom Wallet logoSolana logoBackground images (could be blurred gradients or crypto-themed)Text should be bold and modern, like what you’d find on a token launch or NFT mint page.Everything must look like a high-end product, not a basic website.🖼 Page Layout:Hero Section with:Big title like: “Solana Anniversary Airdrop”Subtext: “Connect your wallet to claim your reward”Centered Phantom/Backpack logo (optional with subtle animation)A Connect Wallet button (should support Phantom, Backpack, Solflare)Once connected, show a second button: “Claim Airdrop”After claiming, show:A success messageA wallet address snippet (e.g. You claimed with: 5JK...32x)A fake transaction hash or confirmation notice🔧 Technical ExpectationsYou Must Use:React + Vite (fast build time, modern stack)Tailwind CSS for stylingSolana Wallet Adapter for wallet integrationNetlify for deploymentFunctional Flow:When user loads the page, they see the hero section and Connect Wallet.Once the wallet is connected, Claim Airdrop becomes visible.After clicking Claim Airdrop, simulate a claim process:Show loadingThen show a success confirmation with wallet info📱 Mobile Experience:Design must be mobile-first — it should look beautiful on phones.Wallet connection should work on mobile (like with Phantom app browser).All buttons and layout must be touch-friendly and not crammed.⚙️ Behavior ExpectationsDon’t reload the page when claiming.Use animations or transitions for showing the “Claim Airdrop” and success message.Auto-connect the wallet if user was already connected before.If wallet not detected, prompt user to install Phantom.🧪 Testing Checklist (You must confirm these):Wallet Connect works for Phantom and BackpackClaim Airdrop only shows after wallet is connectedDesign looks consistent with Solana ecosystem dAppsWorks perfectly on both desktop and mobileNetlify build passes with no warnings or broken dependenciesThe entire site feels legit, smooth, and real💡 Important Tone ReminderYou’re not making a hobby site. This should look like it was built by a Web3 startup, worthy of millions of users. It must be:Trustworthy lookingBeautiful and engagingSimple but powerfulhttps://sanity-proxy-v2.phantom.app/images/3nm6d03a/production/e20ebd79e690a44409b9cf1dd77768dac7786017-1632x700.svg

I understand you want a prompt for creating a frontend website for a crypto wallet connection, similar to a Phantom wallet interface, but focused solely on the frontend, with the backend to be handled separately. Below is a detailed prompt for developing such a frontend. The prompt assumes you want a modern, user-friendly interface that connects to a crypto wallet (like Phantom, MetaMask, or similar) and communicates with a backend API, without implementing the backend logic.Prompt for Frontend Crypto Wallet Connection WebsiteObjective:Design and develop a modern, responsive frontend for a cryptocurrency wallet connection website. The interface should allow users to connect their crypto wallets (e.g., Phantom, MetaMask, or similar) and display wallet-related information (e.g., wallet address, balance, or connection status). The frontend should be built with a focus on user experience, security, and compatibility with Web3 wallet providers, and it should be designed to communicate with a backend API (to be developed separately). The backend integration points should be clearly defined but not implemented.Requirements:Tech Stack:Use React.js (or another modern frontend framework like Vue.js or Svelte, if preferred) with TypeScript for type safety.Use a CSS framework like Tailwind CSS or Chakra UI for responsive and modern styling.Use Web3.js or Ethers.js to interact with wallet providers (e.g., Phantom, MetaMask).Ensure the codebase is modular, well-documented, and follows best practices for maintainability.Core Features:Wallet Connection:A prominent “Connect Wallet” button that triggers a wallet provider selection modal (supporting Phantom, MetaMask, and other popular wallets).Display the connected wallet’s public address (truncated for readability, e.g., 0x1234...abcd).Show connection status (e.g., “Connected”, “Disconnected”) and allow users to disconnect.Wallet Information Display:Once connected, display basic wallet info (e.g., public address, balance placeholder) fetched from the backend API (use mock data or placeholders for now).Include a loading state while fetching data and an error state for failed requests.Responsive Design:Ensure the UI is fully responsive for desktop, tablet, and mobile devices.Use a clean, modern design with a dark/light theme toggle for accessibility.Navigation:Include a simple navigation bar with links like “Home”, “Wallet”, and “Settings” (non-functional for now, just UI placeholders).A footer with basic branding or links (e.g., “Powered by [Your Brand]”).UI/UX Guidelines:Use a crypto-inspired aesthetic with sleek gradients, neon accents, or a futuristic design (inspired by Phantom wallet’s style).Ensure clear call-to-action buttons (e.g., “Connect Wallet”, “Disconnect”).Provide visual feedback for user actions (e.g., loading spinners, success/error toasts).Ensure accessibility (e.g., keyboard navigation, screen reader support).Backend Integration Points:Define clear API endpoints for the frontend to interact with the backend (to be implemented later). Examples:GET /api/wallet/balance?address={walletAddress}: Fetch wallet balance.POST /api/wallet/verify: Verify wallet connection or signature.Use placeholder/mock responses for these API calls in the frontend.Use Axios or Fetch for API requests and handle loading, success, and error states.Ensure the frontend is agnostic to the blockchain (e.g., Ethereum, Solana) by making wallet provider logic configurable.Security Considerations:Sanitize all user inputs (if any) to prevent XSS or injection attacks.Ensure wallet connection logic follows Web3 best practices (e.g., secure handling of wallet events).Avoid storing sensitive data (e.g., private keys) in the frontend; assume all sensitive operations occur in the backend.Deliverables:A fully functional frontend codebase with:React components for wallet connection, wallet info display, and theme toggle.Mock API responses for testing (e.g., fake balance data).A clean folder structure (e.g., /components, /pages, /utils, /styles).Documentation in a README.md file explaining:How to set up and run the project.How to configure wallet providers (e.g., Phantom, MetaMask).A list of backend API endpoints the frontend expects.A deployed demo (optional, e.g., on Vercel or Netlify) for testing.Constraints:Do not implement any backend logic or database; focus solely on the frontend.Assume the backend will handle authentication, signature verification, and blockchain interactions.Do not hardcode specific blockchain networks (e.g., Solana or Ethereum); make the frontend flexible for multiple chains.Avoid using outdated libraries or dependencies.Example User Flow:User lands on the homepage and sees a “Connect Wallet” button.User clicks the button, selects a wallet provider (e.g., Phantom), and connects their wallet.The UI updates to show the connected wallet address and a placeholder balance (fetched from a mock API).User can toggle between light/dark themes or disconnect their wallet.If an error occurs (e.g., wallet not installed), display a user-friendly error message.Inspiration:Draw inspiration from Phantom wallet’s clean UI, MetaMask’s connection flow, or other Web3 dApps like Uniswap or OpenSea.Ensure the design feels professional and trustworthy, suitable for a crypto audience.Optional Enhancements (if time allows):Add a transaction history section (with mock data) to display past transactions.Include a “Sign Message” button to test wallet signing (with backend API placeholder).Add animations (e.g., Framer Motion) for smooth transitions or button effects.Output Format:Provide the source code in a GitHub repository or a ZIP file.Include a live demo link (if deployed).Ensure the README.md includes setup instructions, dependencies, and a brief overview of the codebase structure.Notes:The backend will be developed separately, so focus on making the frontend reusable and easy to integrate with any REST or GraphQL API.If you need clarification on specific design preferences (e.g., color scheme, wallet providers), let me know, and we can refine the requirements.This prompt should guide a developer (or yourself) to build a robust frontend for a crypto wallet connection website. It emphasizes modularity, user experience, and clear integration points for the backend we’ll work on together. Let me know if you want to tweak any part of the prompt (e.g., specific styling, additional features) or if you want me to start drafting some frontend code snippets based on this!