System Requirements Document (SRD)

Project Name: teal-header

1. Introduction

The teal-header project aims to create a professional art website tailored to the needs of Saianshi Saxena in India. The website will celebrate creativity and history through dedicated sections for events, team highlights, faculty coordinators, and founders, while ensuring usability with a structured header, landing page, and footer. The design will incorporate interactive galleries, lightbox previews, and a visually appealing aesthetic to engage users and showcase the artistic essence of the committee, THE LAND OF ART.

2. System Overview

The teal-header website will serve as a hub for showcasing art-related events, team contributions, and organizational history. It will feature:

• A header with a placeholder for the logo of THE LAND OF ART on the left and navigation buttons on the right for seamless access to key sections.
• A Landing Page that introduces the organization and highlights the current team, faculty coordinators, and founders using carousel displays.
• Event galleries for Rangotsav and Kolaahal with yearwise photo collections displayed using lightbox previews.
• A Team Page dedicated to past team members since 2018, with batch information and photos accessible in a separate tab.
• A footer providing contact information, social media links, and other essential details.

The website will prioritize user experience, accessibility, and aesthetic appeal, ensuring it resonates with the artistic theme of the project and committee identity.

3. Functional Requirements

Header

• As a User, I should see a placeholder for the logo of THE LAND OF ART on the left side of the header.
• As a User, I should see navigation buttons on the right side of the header, including About Us, Team, Events, and Contact Us.

Landing Page

• As a User, I should see an "About Us" section introducing the committee and its mission.
• As a User, I should see the current team displayed in a carousel format, showcasing each member's name, photo, and role.
• As a User, I should see photos and descriptions of faculty coordinators in a carousel format.
• As a User, I should see photos and descriptions of the founder and co-founder in a carousel format.

Events Page

• As a User, I should see a section for upcoming events with dates, descriptions, and images.
• As a User, I should see a Rangotsav section with yearwise photo galleries displayed using lightbox previews.
• As a User, I should see a Kolaahal section with yearwise photo galleries displayed using lightbox previews.
• As a User, I should see a "Register Now" button for specific events.

Team Page

• As a User, I should see the past team (since 2018) with batch information and photos, accessible in a new tab.

Footer

• As a User, I should see contact information, including phone number, email link, and Instagram link.

4. User Personas

Admin

• Responsible for managing and updating website content, including events, team details, and galleries.

User

• Visitors exploring the website to learn about the organization, view event galleries, and access team and founder information.

Guest

• Casual visitors who may not interact deeply but will browse the galleries and contact information.

5. Visuals Colors and Theme

Color Palette

The teal-header project will feature a unique color palette inspired by the artistic and professional theme:

• Background: #F4F9F4 (soft mint green)
• Surface: #DDEBEA (light teal gray)
• Text: #123C40 (deep teal)
• Accent: #FF7A59 (vibrant coral orange)
• Muted Tones: #A3C4C5 (subtle blue-gray)

6. Signature Design Concept

Floating Canvas Homepage

The homepage will feature a floating canvas design, where the "About Us" section appears as a dynamic art piece. Users will experience:

• Interactive Animations: The canvas will subtly shift and ripple as users move their cursor, creating a sense of immersion.
• Dynamic Background: A watercolor-inspired background will morph colors based on the time of day, transitioning from soft pastels in the morning to vibrant hues in the evening.
• Lightbox Previews: Clicking on any gallery thumbnail will open a full-screen lightbox with smooth transitions and zoom capabilities.
• Micro-Interactions: Buttons and navigation elements will have hover effects, such as glowing outlines or subtle color shifts.

This bold and unforgettable design will make the website instantly fascinating, leaving a lasting impression on visitors.

7. Non-Functional Requirements

• The website must be responsive and optimized for both desktop and mobile devices.
• Lightbox previews should load quickly and support various photo ratios.
• Navigation should be intuitive and accessible.
• The website should adhere to WCAG 2.1 accessibility standards.
• Selective re-run capability must be implemented to allow user-triggered SRD regeneration for specific sections.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (with Alembic for migrations)

AI Tools

• Litellm for LLM Routing

Local Orchestration

• Docker
• docker-compose

Server-Side Orchestration

• Kubernetes

9. Assumptions and Constraints

Assumptions

• The user prefers lightbox previews for galleries due to varying photo ratios.
• The website will primarily target an Indian audience, with locale-specific defaults such as IST timezone and INR currency.

Constraints

• The website must maintain high performance despite the inclusion of interactive elements and animations.
• All galleries and team photos must be optimized for web use to ensure fast loading times.

10. Glossary

• Lightbox Preview: A feature that allows users to click on a photo thumbnail and view it in an enlarged, interactive overlay.
• WCAG: Web Content Accessibility Guidelines, a standard for ensuring websites are accessible to all users, including those with disabilities.
• Docker: A tool used for containerization, enabling applications to run consistently across different environments.
• Kubernetes: An orchestration tool for managing containerized applications at scale.
• Selective Re-run Capability: A feature allowing users to regenerate specific sections of the SRD without affecting the entire document.