System Requirements Document for ganam-fab

1. Introduction

Ganam Fabrication is a premium manufacturer and installer of uPVC windows, doors, ACP cladding, structural glazing, glass facades, and custom design solutions. The website aims to present Ganam Fabrication as a premium engineering company suitable for corporate clients, builders, architects, and industries. It will be a modern, responsive, and production-ready website with both frontend and backend components.

2. System Overview

The Ganam Fabrication website will provide a comprehensive digital presence for the company, showcasing its products, services, projects, and more. It will include public-facing pages for general visitors and a secure admin dashboard for internal management. The site will be optimized for SEO, performance, and security, and will be suitable for deployment on Vercel (frontend) and Render or Railway (backend).

2a. Product Interpretation and Delivery Boundary

The website will deliver a premium, modern, and corporate feel, using a specified technology stack and design elements. It will include public pages for company information, products, projects, gallery, testimonials, blog, careers, and contact, as well as an admin dashboard for managing content and user interactions. The system will ensure responsive design, SEO optimization, and secure data handling.

2b. Source Content Inventory

Not applicable as no content_source directive is provided.

2c. Page Content and Component Coverage

Home

• Hero Banner: Large hero image, headline, subheading, CTA buttons (Request Quote, Call Now), animated background.
• Why Choose Us: Experience, premium materials, certified team, fast installation, warranty, affordable pricing.
• Products: Large product cards with images, Learn More buttons, hover animations.
• Services: Design, manufacturing, installation, maintenance, repair, consultation.
• Projects: Interactive gallery with category filters (residential, commercial, industrial).
• Statistics: Animated counters for projects, clients, years of experience, customer satisfaction.
• Testimonials: Auto slider with client photos and ratings.
• Brands We Work With: Logo carousel.
• FAQ: Accordion for common questions.
• Contact CTA: Large section for getting a free estimate.
• Footer: Quick links, products, Google Map, contact information, social media, newsletter, copyright.

About Us

• Company Information: History, mission, vision, team, and values.

Products

• Product Categories: uPVC Windows, uPVC Doors, ACP Cladding, Structural Glazing, Glass Facades.
• Product Details: Specifications, benefits, applications, gallery, brochure download, request quote.

Projects

• Project Listings: Name, location, description, completion date, photos.

Gallery

• Masonry Layout: Lightbox, categories, lazy loading.

Testimonials

• Client Feedback: Auto slider with client photos and ratings.

Blog

• Blog Posts: Categories, SEO fields, slug, meta title, meta description, featured image.

Careers

• Job Listings: Apply online, resume upload, store applications.

Contact

• Contact Form: Fields for name, phone, email, city, service required, message. Store in MongoDB, send email notification, show success message.
• Contact Information: Google Maps, address, phone, email, working hours, WhatsApp button.

Admin Login

• Authentication: JWT login, forgot password.

Dashboard

• Overview: Total products, total enquiries, recent contacts, recent applications, website statistics.
• Content Management: Manage products, gallery, projects, testimonials, blogs, careers, contact requests.
• Submissions: Review and manage contact requests and career applications.
• Uploads: Image and resume upload workflows.
• Settings: User management, profile, logout.

3. Functional Requirements

• As a Public Visitor, I should be able to browse company, product, project, gallery, testimonial, blog, career, and contact information and submit enquiries, callback requests, newsletter signups, and job applications. (explicit)
• As a Job Applicant, I should be able to review job listings and submit an application with a resume. (explicit)
• As an Administrator, I should be able to authenticate, manage products, gallery, projects, testimonials, blogs, careers, contact requests, users, settings, uploads, analytics, and exports. (explicit)

4. User Personas

• Public Visitor: Browses Ganam Fabrication's offerings and submits enquiries or applications.
• Job Applicant: Engages with the career module to apply for jobs.
• Administrator: Manages the website's content and user interactions through the admin dashboard.

5. Core User Flows

Public Visitor

1. Access the Home page.
2. Navigate through the menu to view products, projects, gallery, testimonials, blog, and careers.
3. Submit a contact form or job application.
4. Receive confirmation of submission.

Job Applicant

1. Access the Careers page.
2. Review job listings.
3. Submit an application with a resume.
4. Receive confirmation of application submission.

Administrator

1. Log in through the Admin Login page.
2. Access the Dashboard to view website statistics and recent activities.
3. Manage content through the Content Management section.
4. Review and export submissions from the Submissions page.
5. Upload images and resumes through the Uploads page.
6. Manage user settings and profile.

6. Visuals Colors and Theme

• Muse: Dieter Rams
• Palette: Background #F3F4F6, Surface #FFFFFF, Text #1A1A1A, Primary #FF8C00, Accent #FF8C00, Muted #D1D5DB.
• Typography: Saira for headings and body, modular scale 1.25.
• Shape Language: Rounded rectangle controls, dense grids.
• Imagery: Diagrammatic line art and product silhouettes.

7. Signature Design Concept

A hero banner with an oversized product image and data labels, using a strict grid-based layout. Rounded rectangle card components with product imagery and a warm grey and orange accent for call-to-action buttons.

8. Interaction Model & Motion Direction

• Interaction Model: Static
• Motion Tempo: Restrained
• Hero Dimensionality: Flat
• Landing Hero Motion Brief: A large, high-quality image of a product installation spans the viewport with overlaid labels and a signal colour accent, set on a warm grey background.

9. Non-Functional Requirements

• Performance: 90+ Lighthouse Score, responsive, cross-browser, accessible, SEO optimized, fast loading.
• Security: Helmet, JWT, password hashing, rate limiting, input validation, XSS protection, Mongo injection protection, environment variables.

10. Tech Stack

• Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS, ShadCN UI, Framer Motion, Lucide Icons, React Hook Form, Zod, Axios, Swiper.
• Backend: Node.js, Express.js, MongoDB, Mongoose, JWT, Nodemailer, Cloudinary, Multer, Helmet, rate limiting, CORS, environment variables.

11. Assumptions and Constraints

• The website will use placeholder images that can be replaced later.
• Deployment will be supported on Vercel (frontend) and Render or Railway (backend).
• The design will adhere to the specified visual direction and technology stack.

12. Glossary

• CTA: Call to Action
• JWT: JSON Web Token
• SEO: Search Engine Optimization
• CMS: Content Management System
• API: Application Programming Interface