# Apexcel Global Solutions — Website Design Spec

Date: 2026-08-16
Status: Approved

## Goal

Production-ready, premium multi-page corporate website for Apexcel Global
Solutions (recruitment / talent acquisition / accounts & finance services).
Static site, no backend. Source of truth for content: `Final_Website_Apexcel
Global Solutions LLP.docx`. Source of truth for full design/behavior spec:
`Master Claude Prompt — Apexcel Global Solutions Website.md` (both in
`~/Downloads`, referenced not copied).

## Tech stack

- HTML5, Tailwind CSS (compiled via Tailwind CLI — no Play CDN), vanilla ES
  module JS. No frontend framework, no bundler beyond Tailwind's own build.
- GSAP + ScrollTrigger for scroll-driven motion.
- Lenis for smooth scroll.
- Swiper.js for the industries selector / any carousel needs.
- Node/npm used only for the Tailwind build step and a small dev script.

## Pages (6)

Home, About, Our Process, Industries, Why Us, Contact.

No standalone Recruitment Solutions / Accounts & Finance Services pages, no
Privacy Policy / Terms pages — insufficient distinct source content to avoid
padding with invented copy; final deliverable list in the master prompt (§44)
only names these 6.

## Design system

- Logo: `apexcel-logo-v2.png` / `.svg` (higher-res set, visually identical
  mark to original) copied into `assets/logo/`.
- Colors: sampled from logo SVG — deep navy (primary), teal (secondary),
  gold (accent), warm white/charcoal (neutrals). Exact hex values pulled
  from the SVG source during implementation.
- Type: Plus Jakarta Sans (headings/display), Inter (body/UI). Responsive
  scale via `clamp()`.
- Motion/3D: CSS-only spatial system (perspective, `preserve-3d`, layered
  shadow/highlight, subtle parallax via GSAP) per the 3D add-on brief. No
  Three.js/WebGL — nothing here needs true 3D geometry.
- `prefers-reduced-motion: reduce` disables non-essential motion (parallax,
  pointer-tracking, hero rotation) sitewide.

## Content mapping (per docx, no invented facts)

- **About**: company intro, Vision, Mission (4 pillars), Core Values (5).
- **Our Process**: 5-step methodology, verbatim structure and stat callouts
  (50,000+ candidate database, top 5% shortlist rate, 10–14 business day
  turnaround, 90-day replacement guarantee) — used only in their sourced
  context, not combined into new claims.
- **Industries**: Retail, E-commerce & Quick Commerce, Education & EdTech,
  FMCG, Consumer Durables, Consumer Electronics, Automotive & Auto-Ancillary,
  plus the "Others" cluster (Logistics, Healthcare, Real Estate,
  Infrastructure, Hospitality, high-growth startups) — each with the key
  roles / client-category text given in the doc where available.
- **Why Us**: both source lists — "Why Our Recruitment Solutions Work" and
  "Why Companies Choose Apexcel" (5 differentiators with descriptions).
- **Contact**: email `info@apexcelglobal.com`, phone `+91 9611658883`,
  Bangalore, Karnataka, India. Contact form is frontend-only (no backend);
  shows proper success/error UI states, does not claim to actually submit.
- No testimonials, client logos, awards, or team member names/photos —
  none exist in source material, sections are omitted rather than faked.

## Image / asset strategy

- Gemini API key supplied via `.env` (`GEMINI_API_KEY`), used **only** at
  build/dev time by a local script — never bundled into client-side JS,
  never exposed to the browser.
- Assets generated: hero visual, process-journey visual, industries
  background art, why-us composition, CTA background — abstract/geometric
  (network lines, globe, layered panels) in the brand palette. No literal
  "stock people" photography, no fabricated logos/text/claims baked into
  images.
- Each generated image reviewed against brand-quality bar before acceptance;
  regenerated if generic/off-brand.
- Every image has: correct responsive sizing, `object-fit`, lazy loading
  (below the fold), `alt` text, and a CSS-based branded fallback (never a
  broken-image icon) if the file fails to load.
- Final site does not depend on Gemini at runtime — images are pre-generated
  static assets checked into `assets/images/`.

## File structure

```
apexcel-website/
├── index.html, about.html, process.html, industries.html, why-us.html, contact.html
├── assets/{images,icons,logo,fonts}/
├── src/css/ (Tailwind source) → css/styles.css (built)
├── js/{main,animations,navigation,sliders,forms}.js
├── components/ (shared header/footer markup, injected or duplicated per page)
├── scripts/generate-assets.mjs (dev-only Gemini asset generation, reads .env)
├── sitemap.xml, robots.txt
└── README.md
```

## QA bar (from master prompt §36–39, applied at end of build)

- No broken images, no horizontal overflow, no clipped text.
- Responsive check at 320/375/390/430/768/1024/1280/1440/1920px.
- All nav links, mobile menu, CTAs functional; no dead internal links.
- Zero unexpected console errors.
- Contact form validation + success/error states.
- Keyboard nav, focus states, contrast, `prefers-reduced-motion`.
- Verified in the in-app browser tool across breakpoints before calling
  the build complete.

## Delivery

Files delivered as a runnable static site in this project directory (open
via a local static server, e.g. `npx serve`). No deployment/hosting unless
separately requested. Git repo initialized locally for version history;
no remote push without explicit request.