System Requirements Document (SRD)

Project Name: Opal-Design

1. Introduction

Welcome to the System Requirements Document (SRD) for Opal-Design, a premium-quality, responsive frontend design for Savorka Solar, an Indian solar company operating in the renewable energy sector. This document outlines the requirements and design specifications to create a modern, scalable, and visually appealing web application that focuses on lead generation and quotation conversion.

2. System Overview

The Opal-Design project aims to deliver a highly interactive and professional-grade web application for Savorka Solar. The system will feature a clean, corporate look with eco-friendly aesthetics, smooth animations, and mobile-first responsiveness. It will cater to residential and industrial clients, enabling them to generate quotations seamlessly while promoting renewable energy solutions.

Key features include:

• Lead Generation: Interactive forms for residential and industrial solar quotations.
• Corporate Branding: A polished design reflecting trust, reliability, and expertise.
• Eco-Friendly Design: A color palette inspired by nature, emphasizing greens, blues, and whites.
• User Engagement: Micro-interactions, animations, and success confirmations for form submissions.

3. Functional Requirements

Hero Section

• As a User, I should see the company logo prominently displayed.
• As a User, I should see a powerful tagline promoting renewable energy.
• As a User, I should see a background featuring solar panels, sunlight, or clean energy visuals.
• As a User, I should be able to click a CTA button labeled “Get Your Solar Quote.”

About Us Section

• As a User, I should see a short introduction to the company highlighting experience, quality installations, and trustworthiness.
• As a User, I should be able to click a “Download Catalogue” button to download a PDF.

Services / Quotation Section

Residential Solar Quotation Form

• As a User, I should be able to fill out a structured form with validation for fields like Client Name, Contact Number, Installation Location, System Capacity, Panel Brand, Panel Wattage, Inverter Brand, System Type, and Structure Type.
• As a User, I should be able to click a “Generate Quotation” button.
• As a User, I should be able to download the generated quotation as a PDF.

Commercial & Industrial Quotation Form

• As a User, I should be able to fill out a structured form with validation for fields like Client Name, Contact Number, Installation Location, System Capacity, Panel Brand, Panel Wattage, Inverter Brand, and Structure Type.
• As a User, I should be able to click a “Generate Quotation” button.
• As a User, I should be able to download the generated quotation as a PDF.

Bonus Features

• As a User, I should see a solar savings estimate preview with interactive graphs.
• As a User, I should see animated counters displaying projects completed and capacity installed.
• As a User, I should see a testimonials section.
• As a User, I should be able to click a WhatsApp contact CTA button for direct engagement.

4. User Personas

• Admin: Manages backend integration, updates dynamic dropdown lists, and monitors form submissions.
• Residential Client: Seeks solar solutions for homes and fills out the residential quotation form.
• Commercial Client: Seeks solar solutions for businesses and fills out the industrial quotation form.
• Guest User: Browses the website, downloads the catalogue, and explores company information.

5. Visuals Colors and Theme

Color Palette

• Background: #F4F9F4 (Soft eco-friendly white)
• Surface: #E8F5E9 (Light green for cards and sections)
• Text: #1B5E20 (Deep green for headings and primary text)
• Accent: #0288D1 (Bright blue for buttons and links)
• Muted Tones: #B0BEC5 (Subtle gray for secondary text and borders)

6. Signature Design Concept

Floating Solar Landscape Homepage

The homepage will feature a 3D floating solar landscape. Users will see a dynamic scene with solar panels, greenery, and sunlight animations. As they scroll, the landscape transitions smoothly to reveal different sections of the website.

Details:

• Hero Section: Solar panels glimmering under sunlight with a tagline fading in.
• Interactive Animations: Hover effects on panels and buttons.
• Transitions: Smooth scrolling with parallax effects between sections.
• Micro-Interactions: Buttons pulsate subtly when hovered over.
• Solar Savings Preview: Interactive graphs appear as users scroll to the quotation section.

This bold concept will create an unforgettable first impression, emphasizing Savorka Solar’s commitment to innovation and sustainability.

7. Non-Functional Requirements

• The website must load within 3 seconds on both desktop and mobile devices.
• The design must be fully responsive across all screen sizes.
• Forms must include client-side validation for better user experience.
• The system must support dynamic dropdowns for panel and inverter brands.

8. Tech Stack

Frontend

• React for Web

Backend

• Python with FastAPI

Database

• MySQL (preferred for structured data)

AI Tools

• GPT 5.4 for user-friendly responses
• Litellm for LLM routing

Local Orchestration

• Docker and docker-compose

Server-Side Orchestration

• Kubernetes

9. Assumptions and Constraints

• The user will provide dynamic dropdown lists for panel and inverter brands.
• The backend API will handle quotation generation and PDF downloads.
• The website will primarily target Indian clients, with INR as the default currency.

10. Glossary

• CTA: Call-to-Action
• RCC Mounted: Reinforced Cement Concrete Mounted
• On-Grid System: Solar system connected to the main power grid
• Off-Grid System: Solar system independent of the main power grid
• Hybrid System: Combination of on-grid and off-grid systems