MONTRA

Introduction

MONTRA is a project aimed at developing a modern, premium SaaS landing page for a Friend Expense Tracking & Notification Application called "FriendFund". This application is designed to help users track shared expenses, receive instant notifications, and settle up without awkward reminders. The landing page will have a futuristic fintech appearance with a dark navy and black gradient background, accented by purple and blue neon highlights.

System Overview

The MONTRA project will deliver a visually striking and functionally robust landing page for FriendFund, a friend expense tracking application. The landing page will feature a modern design with a focus on user experience, showcasing the application's capabilities through interactive elements and a sleek, responsive interface.

Functional Requirements as Story Points

• As a User, I should be able to see a large bold headline in the Hero Section that states "Track Friends. Track Money. Stay Connected."
• As a User, I should see a subheading in the Hero Section that reads "FriendFund helps you track shared expenses, get instant notifications, and settle up without awkward reminders."
• As a User, I should have access to two CTA buttons: "Start Tracking Now" and "Explore Features."
• As a User, I should see a navigation bar with a logo and menu items: Home, Features, How It Works, About, Contact, and a right-aligned button labeled "Get Started."
• As a User, I should see multiple realistic smartphone mockups in 3D perspective showcasing different app screens.
• As a User, I should be able to view a glassmorphism notification popup with details of a friend's expense addition.
• As a User, I should see feature icons with labels such as Add Friends, Add Expense, Get Notified, Analyze Spend, and Secure & Private.
• As a User, I should experience a dark mode UI with glassmorphism cards, soft glows, and shadows.
• As a User, I should see neon purple gradients and rounded corners throughout the design.
• As a User, I should experience smooth floating animations and subtle particle effects.
• As a User, I should have a responsive design experience across desktop, tablet, and mobile devices.

User Personas

• User: Individuals who want to track shared expenses with friends and receive notifications.
• Admin: The team managing the FriendFund application and ensuring its smooth operation.

Core User Flows

• User visits the landing page -> Reads the headline and subheading -> Clicks on "Start Tracking Now" or "Explore Features" -> Navigates through the menu -> Views smartphone mockups -> Interacts with feature icons -> Experiences the dark mode UI and animations.
• Admin updates the landing page content -> Ensures responsiveness across devices -> Monitors user interactions and feedback.

Visuals Colors and Theme

• primary: #0A0A23 (Dark Navy)
• primary_light: #1A1A3D (Lighter Navy)
• secondary: #8A2BE2 (Blue Violet)
• accent: #00FFFF (Cyan)
• highlight: #FFD700 (Gold)
• bg: #000000 (Black)
• surface: rgba(10, 10, 35, 0.8)
• text: #FFFFFF (White)
• text_muted: #B0B0B0 (Muted Gray)
• border: rgba(255, 255, 255, 0.2)

Signature Design Concept

The landing page will feature an interactive galaxy map where each star represents a feature or section of the application. Users can click on a star to open a task card, drag to rotate the cluster, and hover to highlight connections. This concept will be brought to life using @react-three/fiber and @react-three/drei for 3D interactions, creating an engaging and memorable first impression.

Interaction Model & Motion Direction

The intended interaction model for the landing page is "parallax," providing layered depth via scroll. Decorative layers, such as atmospheric blobs and particle fields, will translate at different speeds, while real content stays in normal flow and scrolls naturally. This approach is ideal for creating a visually rich first impression.

Non-Functional Requirements

• The landing page must load within 3 seconds on a standard broadband connection.
• The design should be responsive and accessible, adhering to WCAG 2.1 guidelines.
• The page should support the latest versions of major browsers, including Chrome, Firefox, Safari, and Edge.

Tech Stack

• Frontend: React for Web
• Backend: Not specified
• Database: Not specified
• AI Models: Not applicable
• AI Tools: Not applicable
• Local Orchestration: Docker, docker-compose
• Server-Side Orchestration: Kubernetes

Assumptions and Constraints

• The landing page will primarily target users in India, considering locale-specific defaults such as currency and timezone.
• The design will focus on a premium fintech aesthetic, appealing to tech-savvy users.

Glossary

• CTA: Call to Action
• UI: User Interface
• WCAG: Web Content Accessibility Guidelines
• 3D: Three-Dimensional
• SaaS: Software as a Service