System Requirements Document (SRD)

Project Name: Agile-Page

1. Introduction

The Agile-Page project aims to redesign and modernize the user interface of the "Aatmanirbhar Subsidy Scheme for MSMEs 2022" webpage. The goal is to replace the static table with a dynamic, interactive, and visually appealing design that enhances user experience while maintaining clarity and accessibility. This document outlines the requirements for the updated design and functionality, incorporating the visual reference provided by Rajvi Shah.

2. System Overview

The Agile-Page project will transform the existing static table into an interactive and responsive design. The new interface will feature dynamic elements such as expandable cards, hover effects, and visual data representations. The design will closely follow the layout density, color palette, and visual tone of the provided reference image. It will be optimized for both desktop and mobile devices, ensuring accessibility across all platforms.

3. Functional Requirements

• As a User, I should be able to view subsidy categories (Micro, Small, Medium) as interactive cards.
• As a User, I should be able to click or hover over a card to expand and view additional details.
• As a User, I should see visual data representations (e.g., bar charts or graphs) for fixed capital investment ranges.
• As a User, I should experience smooth animations and transitions when interacting with elements.
• As a User, I should be able to access the page seamlessly on both desktop and mobile devices.

4. User Personas

1. Admin

• Role: Manages content updates and ensures data accuracy.
• Needs: Easy-to-use backend interface for updating subsidy details.

2. User

• Role: General public seeking subsidy information.
• Needs: Clear, concise, and visually engaging presentation of data.

3. Guest

• Role: Casual visitor exploring subsidy schemes.
• Needs: Intuitive navigation and quick access to relevant information.

5. Visuals Colors and Theme

Color Palette:

Based on the reference image, the following color palette is proposed:

• Background: #1E3A5F (Deep Navy Blue)
• Surface: #F5F8FA (Light Grayish Blue)
• Text: #FFFFFF (White for headings), #4CAF50 (Green for Micro), #2196F3 (Blue for Small), #FF9800 (Orange for Medium)
• Accent: #FFC107 (Golden Yellow for highlights)
• Muted Tones: #E0E0E0 (Soft Gray for borders and inactive elements)

6. Signature Design Concept

Interactive Card-Based Design with Hover Effects

The homepage will feature a card-based layout where each subsidy category (Micro, Small, Medium) is represented as a clickable card.

Details:

• Cards: Each card will display the category name and a brief description. Hovering over a card will trigger a subtle lift animation and reveal additional details like fixed capital investment ranges.
• Animations: Smooth transitions will occur when cards expand or collapse, creating a dynamic user experience.
• Visual Data: A bar chart or graph will appear within the expanded card, visually representing the investment ranges.
• Responsive Design: Cards will stack vertically on mobile devices and align horizontally on desktops.
• Micro-Interactions: Hover effects will include glowing borders and slight color shifts to engage users.

Example Interaction:

• On the landing page, users see three cards labeled "Micro," "Small," and "Medium."
• Hovering over "Micro" lifts the card slightly and reveals details like "Less than or equal to Rs. 1 crore."
• Clicking on "Micro" expands the card to show a bar chart comparing investment ranges across categories.

This design will make the page visually striking and highly interactive, leaving a lasting impression on users.

7. Non-Functional Requirements

• Performance: The page must load within 2 seconds on standard internet connections.
• Accessibility: Ensure compliance with WCAG 2.1 standards for accessibility.
• Responsiveness: The design must adapt seamlessly to various screen sizes and resolutions.
• Security: Protect user data and prevent unauthorized access to backend systems.

8. Tech Stack

Frontend:

• React for Web

Backend:

• Python
• FastAPI

Database:

• MySQL (preferred for structured data)
• Alembic for migrations

AI Tools:

• GPT 5.2 for user-friendly responses

Local Orchestration:

• Docker
• Docker-Compose

Server-Side Orchestration:

• Kubernetes

9. Assumptions and Constraints

Assumptions:

• Users primarily access the page via modern browsers (Chrome, Firefox, Edge).
• The design will follow the reference image's layout and color scheme.

Constraints:

• The design must align with the existing branding of the "Aatmanirbhar Subsidy Scheme for MSMEs 2022."
• Development must adhere to the provided tech stack.

10. Glossary

• WCAG: Web Content Accessibility Guidelines
• RDBMS: Relational Database Management System
• AI: Artificial Intelligence
• Frontend: The user interface of the application
• Backend: The server-side logic and database management

This document provides a comprehensive overview of the Agile-Page project requirements. Let me know if additional details or modifications are needed!