+LOOP Website Project - Technical Architecture & Development

Project: APLUSLOOP LLC FZ Website
Date: January 30, 2026
Document: Part 1 of 3 - Technical Architecture

1. Repository and Version Control

Repository Transfer Checklist:

• Transfer repository ownership to client's GitHub organization
• Add client team members as collaborators
• Provide deployment access credentials
• Document branching strategy recommendations

2. Technical Stack Specifications

Technology Highlights:

• Modern Architecture: Built on Next.js 15 with App Router for optimal performance
• Static Site Generation (SSG): Fully static site for maximum scalability
• Image Optimization: Next.js Image component with custom optimization scripts
• Video Optimization: Custom scripts for banner video compression
• SEO Excellence: Built-in metadata, sitemap, robots.txt, OpenGraph and Twitter cards

3. Programming Stack & Versions

Core Languages:

• TypeScript: Version 5.x (primary language)
• JavaScript: ES2022+ standards
• CSS: Tailwind CSS 4.x
• HTML5: Via JSX/TSX templates

Development Environment Requirements:

• Node.js: 20.x or higher (for building)
• npm: 10.x or higher
• Git: Latest version
• Code Editor: VS Code recommended (TypeScript support)

4. Codebase Architecture

Site Structure & User Flows:

Homepage
  ↓
  ├── Hero Section → Video Background → Call-to-Action
  ├── Technology Services → 4 Main Services → Sub-pages
  ├── Marketing Services → 8 Main Services → Sub-pages
  ├── Testimonials → Client Success Stories
  └── Footer → Quick Links → Contact Info

Navigation Flow:
  ├── Technology Hub → Services & Solutions
  ├── Marketing Hub → Services & Solutions
  ├── About → Company Information
  ├── Blog → Articles & Insights
  ├── Contact → Lead Capture Form
  └── Career → Job Application Portal

Core Features:

1. Multi-Language AI Chatbot (GROQ API)

• Capabilities: Supports 6+ pre-configured languages plus custom language input
• Features: Context-aware responses about company services
• Technology: GROQ AI with custom training on company data
• Location: /components/chatbot/
• Languages: English, Hindi, Spanish, Arabic, French, Chinese, and custom

2. Lead Generation Forms:

• Contact Form: Captures inquiries with department routing
• Career Application: Job application with file upload support
• Newsletter Signup: Email list building
• Technology: Email delivery via Resend API

3. Dynamic Visual Experience:

• Particle Animations: Interactive particle system (tsparticles)
• Scroll Animations: Smooth transitions (Framer Motion, GSAP)
• Video Backgrounds: Optimized WebM/MP4 with fallbacks
• Color Themes: Dynamic theming (Technology Blue, Marketing Pink, Default Black)

4. SEO Optimization:

• Metadata: Comprehensive metadata for all pages
• Sitemap: Auto-generated XML sitemap
• Structured Data: OpenGraph and Twitter card implementations
• Performance: Optimized for Core Web Vitals

File Structure:

/app                    → Next.js app router pages & API routes
  /api                  → Server-side API endpoints
  /(marketing)          → Marketing service pages
  /(technology)         → Technology service pages
  /blog                 → Blog functionality
  
/components             → React components library
  /ui                   → Reusable UI components (buttons, cards, inputs)
  /chatbot              → AI chatbot system
  /landing              → Homepage specific components
  /layout               → Layout components (header, footer, navigation)
  
/lib                    → Utility functions & configuration
  /supabase             → Database client configuration
  chatbot-context.ts    → Chatbot AI context and knowledge base
  chat-store.ts         → State management for chat
  
/public                 → Static assets
  /images               → Optimized images
  /videos               → Compressed video files
  /fonts                → Custom web fonts
  
/types                  → TypeScript type definitions
/scripts                → Build & optimization utilities

5. Dependencies & Packages

Key Dependencies (from package.json):

Core Framework:

• next@15.5.7
• react@18.3.1
• react-dom@18.3.1
• typescript@5

UI & Styling:

• @radix-ui/* (accordion, dialog, dropdown, tabs, select, checkbox, label, navigation-menu, slot)
• tailwindcss@4
• framer-motion@12.9.2
• gsap@3.13.0
• class-variance-authority@0.7.1
• clsx@2.1.1
• tailwind-merge@3.3.0

Form Management:

• react-hook-form@7.56.1
• zod@3.24.3
• @hookform/resolvers@5.0.1

Email & Communication:

• resend@6.0.1
• @react-email/components@0.5.0

AI & Data:

• groq-sdk@0.35.0
• @supabase/supabase-js@2.55.0

Content & Rendering:

• react-markdown@10.1.0
• remark-gfm@4.0.1

Icons & Visuals:

• lucide-react@0.503.0
• tech-stack-icons@2.1.0
• @tsparticles/react@3.0.0

Development Tools:

• @playwright/test@1.53.2
• imagemin@9.0.1 (with plugins)
• fluent-ffmpeg@2.1.3

6. Database Architecture

Database Overview:

• Type: PostgreSQL (via Supabase)
• Hosting: Supabase Cloud
• Connection: Client-side and Server-side SDK
• Purpose: Content Management System for blog posts

Database Relations:

• Blog to Category: Many-to-one relationship
• Foreign Key: blogs.category → categories.id

Schema Location:

• Client SDK: /lib/supabase/client.ts
• Server SDK: /lib/supabase/server.ts
• Queries: /app/actions/blog.ts

Blog Table Structure:

CREATE TABLE blogs (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  title TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  excerpt TEXT,
  content TEXT,
  category TEXT,
  author_name TEXT,
  author_image TEXT,
  featured_image TEXT,
  published_at TIMESTAMP,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

CREATE INDEX idx_blogs_slug ON blogs(slug);
CREATE INDEX idx_blogs_category ON blogs(category);
CREATE INDEX idx_blogs_published ON blogs(published_at);

Categories Table Structure:

CREATE TABLE categories (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  description TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

Database Features:

• Real-time Subscriptions: Available via Supabase SDK
• Row Level Security: Can be configured for access control
• Automatic Timestamps: created_at and updated_at managed automatically
• Full-Text Search: PostgreSQL search capabilities available

7. API Routes & Integrations

API Endpoints:

1. Chat API (/app/api/chat/route.ts)

• Endpoint: POST /api/chat
• Purpose: AI chatbot powered by GROQ (LLM)
• Capabilities: Multi-language support, context-aware responses
• Request Format:
  jsonCopy

  {
    "messages": [
      {"role": "user", "content": "Hello"}
    ],
    "language": "English"
  }
  

• Response Format:
  jsonCopy

  {
    "message": "AI generated response in selected language"
  }
  

• Features: Maintains conversation context, supports 6+ languages

2. Contact Form API (/app/api/contact/route.ts)

• Endpoint: POST /api/contact
• Purpose: Process contact form submissions
• Capabilities: Email delivery with department routing
• Request Format:
  jsonCopy

  {
    "name": "John Doe",
    "email": "john@example.com",
    "phone": "+1234567890",
    "company": "Company Name",
    "message": "Inquiry message",
    "service": "Technology Services"
  }
  

• Integration: Resend email service
• Features: Automated email to appropriate department

3. Newsletter API (/app/api/newsletter/route.ts)

• Endpoint: POST /api/newsletter
• Purpose: Newsletter subscription management
• Request Format:
  jsonCopy

  {
    "email": "subscriber@example.com"
  }
  

• Integration: Resend email service
• Features: Confirmation email, list building

4. Career Application API (/app/api/career-application/route.ts)

• Endpoint: POST /api/career-application
• Purpose: Job application processing
• Request Format:
  jsonCopy

  {
    "firstName": "John",
    "lastName": "Doe",
    "email": "john@example.com",
    "phone": "+1234567890",
    "position": "Software Engineer",
    "experience": "3-5 years",
    "resume": "file data"
  }
  

• Features: Resume file handling, email notification

8. Third-Party Service Integrations

Integration Features:

Resend Email Service:

• Capabilities: Transactional email delivery with templates
• Features: High deliverability, analytics, template management
• Usage: Contact forms, career applications, newsletters
• Configuration: API key in environment variables

GROQ AI Service:

• Capabilities: Advanced language model for chatbot
• Features: Multi-language support, fast response times
• Usage: Customer support chatbot "Sam"
• Configuration: API key in environment variables

Supabase Platform:

• Capabilities: PostgreSQL database, real-time subscriptions, storage
• Features: Admin dashboard, SQL editor, authentication options
• Usage: Blog post management (optional feature)
• Configuration: URL and anonymous key in environment

9. Multi-Language Chatbot System

Supported Languages:

Chatbot Features:

Intelligence:

• Context-aware about all company services
• Department routing for specific inquiries
• Multi-turn conversation support
• Knowledge of company location, hours, contact details

Knowledge Base Coverage:

• All technology services and solutions
• All marketing services and solutions
• Company information and culture
• Blog content and recent posts
• Contact routing by department

Technical Implementation:

• Component: /components/chatbot/ChatWidget.tsx
• Context: /lib/chatbot-context.ts (comprehensive company knowledge)
• State: Zustand store in /lib/chat-store.ts
• API: /app/api/chat/route.ts

User Experience:

• Language selection in chatbot header
• Custom language input option
• Maintains conversation history
• Persistent state during session
• Color-coded by page context (Technology Blue, Marketing Pink, Default Black)

10. Optimization Scripts

Available Optimization Tools:

Located in /scripts/ directory:

Image Optimization:

npm run optimize:images

• Purpose: Compress and optimize all images
• Tools: imagemin with mozjpeg and pngquant
• Output: WebP format for modern browsers

Video Optimization:

npm run optimize:videos

• Purpose: Compress video files
• Tools: fluent-ffmpeg
• Output: Optimized MP4 and WebM formats

Banner Video Optimization Options:

npm run optimize:banners          # Standard optimization
npm run optimize:banners:ultra    # Maximum compression
npm run optimize:banners:balanced # Quality/size balance
npm run optimize:banners:hq       # High quality
npm run optimize:banners:ultra-hq # Premium quality

Video Poster Generation:

npm run create:posters

• Purpose: Generate thumbnail images from videos
• Usage: Video loading placeholders

Complete Optimization:

npm run optimize:all

• Purpose: Run all optimization scripts in sequence
• Includes: Images, videos, banners, and poster generation

11. Development Workflow

Local Development:

# Clone repository
git clone https://github.com/Divyendra-S/Aplus-loop.git
cd Aplus-loop

# Install dependencies
npm install

# Create environment file
cp .env.example .env
# Edit .env with your API keys

# Run development server
npm run dev
# Open http://localhost:3000

# Run with Turbopack (faster)
npm run dev:turbo

Building for Production:

# Standard build
npm run build

# Output will be in 'out/' directory
# Contains all static HTML, CSS, JS, and assets

Testing:

# Run Playwright tests
npm run test

# Run with UI
npm run test:ui

# Run in headed mode (see browser)
npm run test:headed

# Debug tests
npm run test:debug

# Generate test scripts
npm run test:codegen

Quality Checks:

# Lint code
npm run lint

# Type check
npx tsc --noEmit

12. Technical Documentation Files

Available Documentation:

Located in project root directory:

SEO Documentation:

13. Color Theming System

Dynamic Color Schemes:

Technology Services (Blue Theme):

• Primary Color: #0145DF (Technology Blue)
• Usage: All technology service pages
• Gradient: Blue to cyan tones
• Routes: /DigitalTransformationServices, /InfoSecurityServices, /TechnologyConsulting, etc.

Marketing Services (Pink Theme):

• Primary Color: #E62692 (Brand Studio Pink)
• Usage: All marketing service pages
• Gradient: Pink to purple tones
• Routes: /BrandingAndCreative, /DigitalMarketing, /ContentMarketing, etc.

Default Theme (Professional Black):

• Primary Color: #000000 (Professional Black)
• Usage: Homepage, About, Career, Blog
• Accent: White and sophisticated grays

Chatbot Color Adaptation:

• Automatically matches page context
• Provides consistent user experience
• Maintains brand identity across sections

Document Metadata

Part: 1 of 3
Focus: Technical Architecture & Development
Next Document: Infrastructure & Deployment
Prepared: January 30, 2026
Version: 1.0