shadow-law

Introduction

The "shadow-law" project aims to create a professional website for Ashely Ashelyy's law firm located in Dar es Salaam, Tanzania. The website will serve as a digital presence to attract potential clients by showcasing the firm's services, expertise, and client testimonials. The focus will be on providing clear, concise information to build trust and credibility.

System Overview

The shadow-law website will be a straightforward, professional platform designed to present the law firm's services and background effectively. It will include essential features such as an overview of services, a professional bio, and a simple contact form for inquiries. The website will be optimized for potential clients seeking legal services in Dar es Salaam.

Functional Requirements

• As a potential client, I should be able to view the law firm's services.
• As a potential client, I should be able to read the professional bio of the firm.
• As a potential client, I should be able to fill out a contact form for inquiries.

User Personas

• Potential Client: Individuals or businesses seeking legal services in Dar es Salaam, Tanzania. They are looking for information about the firm's expertise and services.

Visuals Colors and Theme

• primary: #1A3A5F (Deep Navy Blue)
• primary_light: #3C5A7F (Light Navy Blue)
• secondary: #D95F5F (Crimson Red)
• accent: #F2C94C (Vibrant Yellow)
• highlight: #F2994A (Warm Amber)
• bg: #F7F9FC (Light Gray)
• surface: rgba(255, 255, 255, 0.9) (Soft White)
• text: #333333 (Dark Charcoal)
• text_muted: #7D7D7D (Muted Gray)
• border: rgba(200, 200, 200, 0.5) (Light Gray)

Signature Design Concept

The homepage of the shadow-law website will feature an interactive "Legal Landscape" concept. This design will present a dynamic, scroll-driven journey through a stylized map of Dar es Salaam, where each district represents a different area of legal expertise offered by the firm. As users scroll, they will "travel" through the city, with animations highlighting key services and testimonials. The map will be interactive, allowing users to click on districts to learn more about specific legal services. This concept will be brought to life using @react-three/fiber for 3D interactions and gsap for smooth scroll animations.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll through the site. This will enhance the storytelling aspect of the homepage, with decorative layers moving at different speeds to create an immersive experience. Internal pages will maintain a "static" interaction model to ensure clarity and ease of access to information.

Non-Functional Requirements

• The website must be responsive and accessible on all devices, including desktops, tablets, and smartphones.
• The website should load within 3 seconds on a standard internet connection.
• The contact form must be secure and protect user data.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• Local Orchestration: Docker, docker-compose

Assumptions and Constraints

• The website will primarily target users in Dar es Salaam, Tanzania.
• The website will not include client interactions like appointment scheduling or document uploads at this stage.
• The design will focus on simplicity and professionalism to align with the firm's brand.

Glossary

• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.
• Responsive Design: A design approach that ensures a website looks good on all devices and screen sizes.
• FastAPI: A modern, fast (high-performance) web framework for building APIs with Python 3.6+.
• Docker: A platform used to develop, ship, and run applications inside containers.
• Alembic: A lightweight database migration tool for use with SQLAlchemy.