MARVS GLOBAL HOMEPAGE (RED AND BLACK, 4-SLIDE HERO): HOW TO PUT IT ON CPANEL
===========================================================================

What you have
-------------
public_html/        The website. Upload the CONTENTS of this folder. Nothing else needs to be uploaded.
package.json, src/  Only needed if you want to change the design with Tailwind later (see the end).

It is a plain static page: no PHP, no database, nothing to install on the server.


1. Turn on HTTPS first (2 minutes)
----------------------------------
cPanel > SSL/TLS Status > tick your domain > Run AutoSSL.
(The site sends visitors to the https address. Without a certificate, browsers show a warning.)

2. Upload
---------
cPanel > File Manager > open public_html (or the folder of your domain).
Upload everything inside the public_html folder from this zip
(index.html, favicon.svg, robots.txt, sitemap.xml, .htaccess, and the folders "assets" and "images").
Tip: .htaccess is a hidden file. In File Manager > Settings, tick "Show Hidden Files (dotfiles)" to see it.
Easier: upload the whole zip, use "Extract", then move the files out of the extracted public_html folder.

3. Add your details
-------------------
In File Manager, open  assets/js/site-config.js  > Edit.
Fill in your RC number, phone, WhatsApp, email, address and social links. Save.
The call, WhatsApp and email buttons on the red section appear automatically once you do.
Anything left empty keeps its [bracketed] placeholder, so you can see what is missing.

4. Put in your domain name
--------------------------
Replace  YOURDOMAIN.com  with your real domain (for example marvsglobal.com) in:
  index.html   (3 places: canonical, og:url and the JSON-LD block near the top)
  robots.txt   (1 place)
  sitemap.xml  (1 place)
In File Manager, use Edit and then Ctrl+F to find each one.

5. Add your photos
------------------
Upload photos to the  images  folder using the file names listed in images/README.txt.
The four hero slides use slide-1.jpg to slide-4.jpg. Each photo appears in its slot automatically.
Until then, labelled placeholders show on a black background.

6. Check it
-----------
Open the site on your phone and on a computer. Tap every menu link and button.
If the page looks unstyled after upload, the folder "assets" did not upload completely: upload it again.
After you change any file later, add ?v=2 (then ?v=3 ...) to its name in index.html
(for example assets/css/style.css?v=2) so visitors' browsers fetch the new version.


How the hero slider behaves
---------------------------
- Four slides, each stating facts about Marvs services. It moves on by itself every 7 seconds.
- It holds still while a visitor's mouse is over it or a button has keyboard focus.
- The Pause button stops it completely. Previous, Next, the four numbered buttons, the left and right
  arrow keys and a swipe on a phone all change slides.
- Visitors whose device is set to "reduce motion" never get automatic movement.
- If JavaScript is off, the four slides simply appear one under another.
To change a slide's wording, edit the text inside index.html (search for "We build it").
To change the speed, see "7000ms" in src/input.css and rebuild (see below).

About the facts on the slides
-----------------------------
Each slide states what the service is. The numbers in [BRACKETS] (projects completed, properties sold or let,
sites supplied) are placeholders: replace each with a real figure you can prove, or delete that line.
Slide 4 describes the Track My Project client portal. Keep it only if the portal is going ahead.


Things to replace before launch (all marked in [BRACKETS] on the page)
---------------------------------------------------------------------
- Company details: RC number, address, phone, email, social links
- The three slide figures and the "Why Choose" wording that says [Confirm...]
- The three project cards: real projects, with the client's permission
- The logo: replace the red square and "Marvs Global" text (search for "Logo placeholder" in index.html)
- The privacy policy line in the footer: add a real page when it exists
- The "Client login opens soon" note: when the client portal is live, set portalUrl in site-config.js


Changing the design later (optional, needs Node.js on your own computer)
-----------------------------------------------------------------------
The styling is Tailwind CSS. The page uses Tailwind classes in index.html. The brand colours (red and black)
and sizes are in src/input.css. After a change, run these in this folder:
    npm install
    npm run build
That rebuilds public_html/assets/css/style.css. Upload that one file to cPanel.
