# KCPC Website Redesign

A complete, modern, mobile-first static website redesign for **Kuwait Company for Process Plant Construction & Contracting K.P.S.C (KCPC)** — https://kcpc.com.kw.

This project was generated as a redesign concept/proposal. It contains no CMS or build step and can be opened directly in a browser or deployed to any static host.

---

## Project Overview

- **Company:** KCPC
- **Original site:** https://kcpc.com.kw
- **Local directory:** `/Users/kuwaitna/Documents/GitHub/kcpc`
- **Repo:** https://github.com/Ranzware/kcpc.git
- **Stack:** Plain HTML5, CSS3, vanilla JavaScript
- **No build step required**
- **Design direction:** Creative, professional, mobile-first, fully responsive

The original site is a WordPress + PHP 7.4 installation with a large plugin stack. This redesign removes that runtime dependency, replacing it with a lightweight static site tuned for performance, security and modern mobile UX.

---

## Pages List

| Page | File | Description |
|------|------|-------------|
| Home | `index.html` | Hero, stats, services preview, featured projects, about teaser, client logos |
| About | `about.html` | Company overview, history, vision/mission, board message, certifications, leadership |
| Services | `services.html` | All 9 service divisions with imagery and CTAs |
| Projects | `projects.html` | Featured + additional project portfolio |
| Investors | `investors.html` | Annual reports, Boursa Kuwait links, contact |
| Careers | `careers.html` | Current openings and general application |
| Contact | `contact.html` | Contact form, phone, email, address, working hours |

---

## Design Notes

- **Palette:** Deep navy (`#0b1d36`) paired with warm gold/amber (`#f5a623`) and a soft sand/cream background — evoking both engineering credibility and the Kuwaiti landscape.
- **Typography:** Inter (Google Fonts) for clean, readable Arabic/Latin mixed content.
- **Layout:** Mobile-first CSS with a single stylesheet, CSS custom properties, CSS Grid and Flexbox.
- **Interactions:** Scroll-triggered reveal animations, an animated stats counter, hover lifts on cards, and a responsive hamburger menu.
- **Assets:** Public images downloaded from the original site and optimized with meaningful filenames under `images/`.
- **Performance:** Single CSS + JS file, Google Fonts preconnect, no render-blocking plugin CSS, no dynamic CMS overhead.
- **Security improvement:** No exposed PHP/WordPress attack surface in the redesigned static output.

---

## Audit Deliverables

- `SECURITY_PERFORMANCE_REPORT.md` — markdown security/performance audit
- `security-performance-report.html` — print/PDF-friendly version with `@page` CSS

---

## How to Run Locally

Option 1 — open directly:
```bash
open index.html
```

Option 2 — simple Python server (recommended for testing fonts/assets):
```bash
cd /Users/kuwaitna/Documents/GitHub/kcpc
python3 -m http.server 8000
# Then open http://localhost:8000
```

Option 3 — Node/BrowserSync if available:
```bash
npx serve .
```

No build step or dependency installation is required.

---

## Deployment Notes

Because the site is fully static, it can be deployed to:

- **GitHub Pages** — push to `main` and enable Pages on the repo settings.
- **Netlify / Vercel** — drag-and-drop the folder or connect the Git repo.
- **Cloudflare Pages** — connect the repo for automatic builds (none needed).
- **Traditional hosting** — upload the files via FTP/SFTP to any Apache/Nginx host.

Recommended production headers to add at the host/CDN level:
```
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
```

---

## Asset Notes

Most public images were downloaded from `https://kcpc.com.kw/wp-content/uploads/`. Any asset that returned 404 is noted in the download log and was skipped. The company profile PDF (`images/kcpc-company-profile.pdf`) is included for reference.

---

## Next Steps / Remaining Manual Work

1. Replace downloaded client logos with higher-resolution or vector versions where available.
2. Add real project detail pages if the company wants individual case studies.
3. Connect the contact form to a backend (Formspree, Netlify Forms, or a custom endpoint) before going live.
4. Add Arabic (`ar/`) mirror pages if bilingual deployment is required.
5. Run a full accessibility audit (WCAG 2.1) and add any missing ARIA attributes.
6. Validate HTML/CSS with the W3C validators.
7. Set up the chosen host and custom domain with HTTPS + security headers.

---

*Generated by the KCPC redesign workflow on 2026-06-22.*