Modern Cryptography Application

"Design a modern ReactJS application styled with Tailwind CSS to emulate a desktop like cryptography application. The application should feature a user friendly interface with intuitive navigation. The design must be responsive and optimized for a desktop view. Follow these requirements: 1. General Layout: Title: Modern Cryptography Application. Framework: Use ReactJS with functional components and Tailwind CSS for styling. Application Layout: A fixed sidebar on the left for navigation (dark theme). A main content area on the right to display the selected feature. The layout should resemble a desktop application with distinct sections for sidebar navigation and main content. 2. Sidebar (Navigation): Style: Fixed width: w 64. Background: Dark gray (bg gray 800), with white text. Navigation items: Rounded corners with hover effects (hover:bg gray 700). Include small, relevant icons next to each navigation item. Content: Application title at the top: "Features" (styled as text xl font bold). Navigation buttons for these features: "Basic Cipher" "Symmetric Encryption" "Asymmetric Encryption" "Hashing" "Digital Signature" Buttons should have hover effects, cursor pointers, and icons. 3. Main Content Area: Default View (Welcome Screen): Centered text: "Welcome to Modern Cryptography Application!". Style: Large font size (text 3xl font bold) with a subtle accent color. Panels (Feature Pages): Each feature should have its own page, navigated using React Router. Implement the following UI for each feature: 4. Individual Features: Basic Cipher Panel: Input Fields: Text areas for input text and output text. Dropdown for selecting cipher type (e.g., Caesar, Substitution). Number input for shift value (if Caesar cipher is selected). Action Buttons: "Encrypt" and "Decrypt" buttons with hover effects and subtle animations (transition ease in out). Validation: Disable buttons until valid input is provided. Symmetric Encryption Panel: Input Fields: Text areas for input text and output text. Dropdowns for selecting: Algorithm (e.g., AES, DES, Blowfish). Mode (e.g., ECB, CBC). Padding (e.g., PKCS5Padding). Key Management: Buttons for: "Generate Key": Creates a new key and displays it in Base64 format. "Load Key": Allows the user to upload a key file or enter it in Base64 format. Display area for the generated/loaded key. Action Buttons: "Encrypt" and "Decrypt" buttons with hover effects. Validation: Ensure encryption/decryption cannot proceed without a valid key. Asymmetric Encryption Panel: Input Fields: Text areas for short input text and output text. Display areas for public/private keys in Base64 format. Key Management: Buttons for: "Generate Keys": Generates a new public/private key pair. "Load Public Key": Upload or input a public key. "Load Private Key": Upload or input a private key. Action Buttons: "Encrypt" (uses public key) and "Decrypt" (uses private key). Hashing Panel: Input Fields: Text area for input or file upload. Dropdown for selecting hash algorithm (e.g., MD5, SHA 256, SHA 512). Output Field: Displays the computed hash value in a readonly text area. Action Button: "Calculate Hash." Digital Signature Panel: Input Fields: Text area for the message to sign. Fields for loading public/private keys and the signature. Key Management: Buttons for: "Generate Keys": Creates a new public/private key pair. "Sign Message": Signs the message with the private key. "Verify Signature": Verifies the signature using the public key. 5. Styling with Tailwind CSS: Buttons: Rounded corners (rounded lg), hover effects (hover:bg indigo 600), and smooth transitions (transition duration 300). Colors: Primary accent color: Indigo (bg indigo 500). Secondary color: Light gray for backgrounds (bg gray 100). Typography: Use font sans with modern weights (font bold, font medium). Spacing: Generous padding and margins (p 4, m 4) for a clean layout. Cards/Sections: Use shadow lg for depth. Rounded edges (rounded xl). 6. Features and Functionality: Use React Router for navigation. Use React state and context to manage encryption keys and inputs. Provide user friendly error messages as toast notifications or inline messages. Generate a complete ReactJS codebase with Tailwind CSS styling. Include all required components, routes, and placeholder logic for the cryptographic features."