System Requirements Document for web-aislaminto

1. Introduction

The project "web-aislaminto" aims to create a new and improved website inspired by the existing site of the Asociación Islámica de Menorca (https://aislamientorbay.es/). The primary intent is to enhance the user experience by improving informational clarity and community cohesion, aligning with the cultural and community-focused nature of the Islamic Association in Menorca. The target audience includes individuals interested in Islamic culture and the local Muslim community in Menorca.

2. System Overview

The system will deliver a web platform that allows users to create and manage websites inspired by the Asociación Islámica de Menorca's site. The platform will support user account creation, login, and project management, enabling users to build, preview, and refine their web proposals. The design will follow a humane technology approach, emphasizing warmth and community engagement.

2a. Product Interpretation and Delivery Boundary

The product will be delivered as a web application with custom UI, requiring user authentication for project management. The site will not replicate the reference site but will use it as a structural and stylistic inspiration. The application will maintain user identity for continuity across sessions, with backend integration to persist user projects.

2b. Source Content Inventory

• Principal Entity: Asociación Islámica de Menorca
  • Description: Website dedicated to information about Islam, activities, services, and contact.
• Visible Sections:
  • Inicio: Main page with welcome and overview.
  • Quiénes Somos: Information about the organization, mission, and objectives.
  • Servicios: Services offered by the association, including updated contact information.
  • Actividades: List and calendar of activities and events.
  • Galería: Images related to the community and activities.
  • Contacto: Contact form and details (email, address, phone).
• Media: Images of activities and community.
• Contact Links: Contact form, visible email, postal address, phone.
• Primary Language: Spanish

2c. Page Content and Component Coverage

Landing

• Information/State: Introduction to the web creation process inspired by the reference site.
• Primary Actions: Navigate to Sign Up or Login.
• Components: Hero image, navigation overlays, introductory text.

Login

• Information/State: User authentication interface.
• Primary Actions: Log in to access saved projects.
• Components: Login form with email and password fields.

Sign Up

• Information/State: User registration interface.
• Primary Actions: Create a new account.
• Components: Registration form with fields for name, email, and password.

Projects

• Information/State: List of user-created web proposals.
• Primary Actions: View, edit, or delete projects.
• Components: Project cards, action buttons for project management.

Website Builder

• Information/State: Workspace for designing and refining web proposals.
• Primary Actions: Add, edit, and arrange content blocks.
• Components: Drag-and-drop editor, content block library, save functionality.

Preview

• Information/State: Display of the current web proposal for review.
• Primary Actions: Navigate through the proposal, provide feedback.
• Components: Interactive preview, feedback form.

3. Functional Requirements

• As a Solicitante del sitio, I should be able to create a new account via self-registration to start using the product. (required_inference)
• As a Solicitante del sitio, I should be able to log in to continue working on my saved web proposals. (required_inference)
• As a Solicitante del sitio, I should be able to create and manage web proposals inspired by the reference site. (explicit)
• As a Solicitante del sitio, I should be able to preview my web proposals to evaluate them during creation. (required_inference)
• As a Solicitante del sitio, I should be able to save my web proposals to the backend for future review and continuation. (required_inference)
• The visible phone number on the website must be updated to 663494990. (explicit)

4. User Personas

• Solicitante del sitio: The individual requesting to create a new website inspired by the provided reference, with the requirement to improve upon it. Responsibilities include account creation, project management, and proposal refinement.

5. Core User Flows

1. Account Creation and Login

   • User accesses the Landing page.
   • User selects Sign Up to create an account.
   • User completes the registration form and submits it.
   • User receives confirmation and logs in via the Login page.
   • User accesses the Projects page to view or start new proposals.

2. Project Creation and Management

   • User logs in and navigates to the Projects page.
   • User selects to create a new project, entering the Website Builder.
   • User uses the drag-and-drop editor to design the proposal.
   • User saves changes, which are persisted in the backend.
   • User previews the proposal via the Preview page.
   • User provides feedback or makes further edits as needed.

6. Visuals Colors and Theme

• Muse: Yves Béhar
• Palette:
  • Background: #F8F4EC
  • Surface: #FFFFFF
  • Text: #333333
  • Primary: #A46336
  • Accent: #D9A066
  • Muted: #E4DCCF
• Typography:
  • Headings: Karla, Medium weight
  • Body: Work Sans
  • Scale: 1.25 modular (48/36/24/18/16)
• Shape Language: Rounded product-led heroes, soft cards
• Layout: Soft cards, rounded edges, spacious margins, modular grids
• Imagery: Warm product and lifestyle photography

7. Signature Design Concept

The Landing page will feature a large hero image showcasing community activities, with rounded card overlays for navigation. The design will use warm muted backgrounds and large call-to-action buttons in the primary color to guide users through the site.

8. Interaction Model & Motion Direction

• Interaction Model: Animated
• Motion Tempo: Restrained
• Hero Dimensionality: Layered_2d
• Landing Hero Motion Brief: The hero image will feature a slow zoom effect on community activities, with navigation cards gently fading in. The motion will use slow easing to maintain a calm and welcoming atmosphere.

9. Non-Functional Requirements

• The website must be accessible and responsive across all major devices and browsers. (basic_default)
• The backend must securely store user data and project proposals. (required_inference)

10. Tech Stack

• Frontend: React
• Backend: Python/FastAPI
• Storage: Appropriate database for user data and project persistence
• Deployment: Docker/docker-compose

11. Assumptions and Constraints

• The reference site is used for inspiration only; the new site must be an improvement.
• User identity and session continuity are required for project management.
• No specific limits on the number of pages or user access have been defined.

12. Glossary

• Solicitante del sitio: The user who requests the creation of a new website inspired by the reference site.
• Website Builder: The tool within the application used to design and refine web proposals.