# Shalom Suriname app landing page

A lightweight, dependency-free launch page for the Shalom Suriname Android and iPhone apps.

## Demo deployment

**Demo URL:** `https://demo.gularinnovate.com/shalom_landing/`

**Official Shalom website:** `https://shalomsuriname.com/`

**Current environment:** `demo` / `prelaunch` / `noindex`

The demo is hosted inside a subdirectory (`/shalom_landing/`). All internal assets, styles, scripts and legal pages use relative paths so the same source works when the site is later moved to a root domain.

## Files

- `index.html` — landing page with demo SEO metadata
- `styles.css` — responsive design, motion, visual system, and legal page styles
- `script.js` — centralized `SITE_CONFIG`, progressive enhancements, and legal placeholders
- `resources/assets/` — official logo, supplied app mockups and social preview image
- `privacy/index.html` — public privacy policy (`/privacy`)
- `voorwaarden/index.html` — public terms of use (`/voorwaarden`)
- `.htaccess` — `DirectoryIndex index.html` for Apache directory-based routing

## Clean legal URLs

The site includes two public legal pages:

- `/privacy` — Privacybeleid
- `/voorwaarden` — Gebruiksvoorwaarden

These are served as clean URLs without `.html` using directory-based routing (`privacy/index.html`, `voorwaarden/index.html`).

Most static hosts will redirect `/privacy` to `/privacy/` and `/voorwaarden` to `/voorwaarden/` automatically. Direct page reloads on `/privacy/` and `/voorwaarden/` work because every route has its own `index.html`.

No JavaScript router is used to hide `.html`.

## Configuration

All environment-specific settings are in `SITE_CONFIG` at the top of `script.js`:

```js
const SITE_CONFIG = Object.freeze({
  environment: "demo",          // "demo" or "production"
  allowIndexing: false,         // set to true for the official production domain
  siteUrl: "https://demo.gularinnovate.com/shalom_landing", // base URL (no trailing slash)
  appStatus: "prelaunch",       // change to "live" once store links are available
  playStoreUrl: "",
  appStoreUrl: "",
  apkUrl: "downloads/shalom-app.apk",  // direct Android APK download (not a store listing)
  apkFileName: "shalom-app.apk",
  websiteUrl: "https://shalomsuriname.com", // official existing Shalom website
  contactUrl: "mailto:Info@shalomsuriname.com",
  facebookUrl: "https://www.facebook.com/shalomsuriname/",
  youtubeUrl: "https://www.youtube.com/@shalomradioentvsuriname5066",
  ogImageUrl: "",               // optional full-URL override
  ogImagePath: "resources/assets/generated/og.jpg",   // relative to siteUrl
  contactEmail: "Info@shalomsuriname.com",
  contactPhone: "+(597) 422-630",
  legalAddress: "Stadionlaan 7, Paramaribo, Suriname",
});
```

The `ogImagePath` is combined with `siteUrl` at runtime to produce absolute Open Graph and Twitter image URLs:

`https://demo.gularinnovate.com/shalom_landing/resources/assets/generated/og.jpg`

The supplied source is `resources/assets/original_assets/og.png` (`1731 × 909`). A derived social preview is generated as `resources/assets/generated/og.jpg` (`1200 × 630`, ~128 KB) and used as the Open Graph / Twitter image.

## Demo SEO and robots

For the demo/staging environment the site is set to:

```html
<meta name="robots" content="noindex, nofollow">
```

This applies to `index.html`, `privacy/index.html` and `voorwaarden/index.html`.

Canonical and Open Graph URLs are currently configured to the demo URL:

- Home: `https://demo.gularinnovate.com/shalom_landing/`
- Privacy: `https://demo.gularinnovate.com/shalom_landing/privacy/`
- Terms: `https://demo.gularinnovate.com/shalom_landing/voorwaarden/`

## Moving from Demo to Production

Required changes should ideally be only:

1. In `script.js`:
   - change `environment` from `"demo"` to `"production"`;
   - set `allowIndexing` to `true`;
   - replace `siteUrl` with the official production base URL;
   - add verified `playStoreUrl` and `appStoreUrl`;
   - change `appStatus` to `"live"`.
2. In `index.html`, `privacy/index.html` and `voorwaarden/index.html`:
   - update each page's hardcoded `canonical`, `og:url`, `og:image` and `twitter:image` to the production URL;
   - change `meta name="robots"` from `noindex, nofollow` to `index, follow` for the production policy.

Internal asset paths and legal links are relative, so the rest of the HTML does not need editing when the base path changes.

## Performance

### Asset strategy

- All original supplied assets are preserved in `resources/assets/original_assets/` and are never overwritten.
- Optimised WebP variants live in `resources/assets/` and `resources/assets/generated/`.
- The page uses `<picture>` with WebP `srcset` and a PNG fallback so older browsers still receive the approved source files.
- Hero device mockups are served with responsive `srcset` (`640w`, `960w`, full width) and intrinsic `width`/`height`, using `fetchpriority="high"` and `decoding="async"` for the LCP image.
- The Shalom logo is served at `64w`, `128w` and `256w` WebP sizes for header, footer and notification card usage.
- The social preview image is `generated/og.jpg` (`1200 × 630`) at ~128 KB.

### Caching and compression

`.htaccess` includes production-like rules for:

- `mod_deflate` compression of text, JavaScript and SVG assets.
- Long cache lifetime (`max-age=31536000, immutable`) for CSS, JavaScript and image assets.
- Short/no-cache for HTML documents.
- A `robots.txt` (`Disallow: /`) is present to keep the demo from being indexed.

### Repeatable audit

Run the local subdirectory server:

```bash
python3 /tmp/shalom_server.py
```

Then run Lighthouse against `http://127.0.0.1:8091/shalom_landing/`:

```bash
# Mobile
lighthouse http://127.0.0.1:8091/shalom_landing/ \
  --chrome-flags="--no-sandbox --headless" \
  --screen-emulation.mobile \
  --screen-emulation.width=390 --screen-emulation.height=844 --screen-emulation.deviceScaleFactor=3

# Desktop
lighthouse http://127.0.0.1:8091/shalom_landing/ \
  --chrome-flags="--no-sandbox --headless" --preset=desktop
```

### Latest Lighthouse results (local, Lighthouse 13.4.1, Chrome 151)

- **Mobile 390 × 844, DPR 3:**
  - Performance: ~95
  - Accessibility: 100
  - Best Practices: 100
  - SEO: 69 (expected for a `noindex` demo)
  - LCP: ~2.9 s
  - CLS: 0
  - TBT: 0–50 ms
  - Total transfer: ~460 KB

- **Desktop 1440 × 900:**
  - Performance: 100
  - Accessibility: 100
  - Best Practices: 100
  - SEO: 69
  - LCP: ~0.5 s
  - CLS: 0
  - TBT: 0
  - Total transfer: ~460 KB

Mobile runs at `360 × 800` showed similar values but can score in the 88–95 range depending on CPU-throttling variance; the dominant bottleneck is now the time it takes the browser to decode and paint the responsive hero image under simulated slow 4G, not the asset size.

## Local QA

From this directory, start any static HTTP server. To simulate the subdirectory deployment, mount the project under `/shalom_landing/`:

```bash
python3 /tmp/shalom_server.py
```

Then open `http://127.0.0.1:8091/shalom_landing/`.

A simpler root-only preview:

```bash
python3 -m http.server 8080
```

Then open `http://localhost:8080`.

## What has been verified

- Landing page, `/privacy` and `/voorwaarden` serve and reload correctly under `/shalom_landing/`.
- All assets, including WebP variants and original PNG fallbacks, resolve under the subdirectory; original source files are in `resources/assets/original_assets/`.
- Footer links to `https://shalomsuriname.com/`, `privacy/` and `voorwaarden/` work.
- No `.html` appears in public-facing links.
- Canonical, `og:url`, `og:image` and `twitter:image` are absolute HTTPS URLs.
- All pages are `noindex, nofollow` for the demo.
- Responsive layout checked at 360, 390, 768, 1024, 1440 and 1920 pixels.
- Mobile menu, prelaunch buttons, platform selector and notification demo remain functional.
- No JavaScript console errors.
- `robots.txt` is valid and serves `Disallow: /`.
