gentle-testimonial System Requirements Document

1. Introduction

The "gentle-testimonial" project aims to provide a comprehensive solution for collecting and displaying testimonials. This project is inspired by the success of similar businesses like Senja, which have capitalized on the need for social proof in the SaaS and agency sectors. The goal is to simplify the process of gathering and embedding video and text testimonials, reducing the manual effort typically involved.

2. System Overview

The gentle-testimonial system will offer tools for collecting testimonials from users and displaying them on websites. It will include widgets for both video and text testimonials, allowing businesses to easily integrate social proof into their online presence. The system will be designed to be user-friendly and efficient, minimizing the manual work required to gather testimonials.

3. Functional Requirements as Story Points

• As a Business Owner, I should be able to collect video testimonials from my clients.
• As a Business Owner, I should be able to collect text testimonials from my clients.
• As a Business Owner, I should be able to embed collected video testimonials on my website.
• As a Business Owner, I should be able to embed collected text testimonials on my website.
• As a Business Owner, I should be able to manage and organize collected testimonials through a dashboard.
• As a Business Owner, I should be able to customize the appearance of testimonial widgets to match my brand.
• As a User, I should be able to easily submit a video testimonial through a simple interface.
• As a User, I should be able to easily submit a text testimonial through a simple interface.

4. User Personas

• Business Owner: The primary user who will collect and display testimonials on their website.
• User: The individual providing testimonials, either in video or text format.

5. Core User Flows

• Business Owner sets up testimonial collection widget -> User submits testimonial -> Testimonial is reviewed and approved -> Testimonial is embedded on the website.
• Business Owner customizes widget appearance -> Embeds widget on website -> Testimonials are displayed in the customized format.

6. Visuals Colors and Theme

[Default — not specified by user]

• primary: #4A90E2 (a professional blue for trust and reliability)
• primary_light: #A6C8F0 (a lighter tint for hover states)
• secondary: #F5A623 (a warm orange for contrast and emphasis)
• accent: #50E3C2 (a vibrant green for call-to-action elements)
• highlight: #F8E71C (a bright yellow for notifications and active states)
• bg: #FFFFFF (a clean white background for clarity)
• surface: #F7F7F7 (a light grey for card and panel backgrounds)
• text: #333333 (a dark grey for primary text)
• text_muted: #888888 (a softer grey for secondary text)
• border: #DDDDDD (a subtle grey for borders)

7. Signature Design Concept

The homepage will feature an interactive "Testimonial Carousel" where users can click and drag to rotate through a 3D carousel of testimonial cards. Each card will flip to reveal the full testimonial when clicked. The carousel will use @react-three/fiber for 3D rendering and gsap for smooth transitions. The design will be engaging and dynamic, encouraging interaction and exploration.

LANDING HERO MOTION BRIEF

The landing page will feature a dynamic animation where testimonial cards gather around a central focal point, a rotating globe. As the globe spins, cards will animate in from different directions, representing the global reach and impact of testimonials. The animation will loop every 10 seconds, with a smooth transition between states using motion/react. The first frame will show a clear, attractive arrangement of cards with unobstructed CTAs.

8. Interaction Model & Motion Direction

• Intended Interaction Model: parallax
• The landing page will utilize layered depth via scroll, with testimonial cards and decorative elements moving at different speeds to create a sense of depth.
• Internal pages will follow a "static" model for clarity and ease of use, focusing on functionality over motion.

9. Non-Functional Requirements

• The system must be responsive and work seamlessly across all devices and screen sizes.
• The system should ensure data security and privacy for all user-submitted testimonials.
• The system must be scalable to handle a large number of testimonials and users.

10. Tech Stack

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

11. Assumptions and Constraints

• The system assumes users have access to a device capable of recording video for video testimonials.
• The system will be constrained by the need to integrate seamlessly with various website platforms for embedding testimonials.

12. Glossary

• Testimonial: A statement testifying to the benefits or quality of a product or service.
• Widget: A small application or component that can be embedded in a website to perform a specific function.
• Carousel: A rotating set of images or content that users can interact with to view different items.