Wix redesign implementation pack

Define theme colours so every element inherits them instead of being styled one-by-one:

Color 1  #0A1A33   Dark Blue – page background
Color 2  #152A4A   Navy surface – cards, panels
Color 3  #1E3559   Navy soft – borders, dividers
Color 4  #F97316   ORANGE – buttons, links, accents
Color 5  #FFA340   Orange bright – hover / gradient end
Color 6  #F5F7FA   Near-white – headings
Color 7  #A9B6C9   Steel grey – body copy

Heading font : Space Grotesk (H1 64/56/40, H2 40, H3 20)
Body font    : DM Sans 16/17, line-height 1.7

Add one Wix Section per block above, in order, and rename each one (Header, Hero, Brands, Why, Products, Story, Industries, Projects, CTA, Contact). Renamed sections become anchor targets automatically, so the menu items Why Choose Us / Our Products / Industries / Projects / Contact Us can point at Link → Section on this page. Use a 12-column grid, 1200px max content width, 96–120px vertical section padding.

Work down the audit table. For each product card, set the "+ Learn More" link toDocument and paste the existinghttps://www.vorratech.com/_files/ugd/aa5422_....pdfURL. Keep the page slugs /why-choose-us, /industries and /s-projects-basic. If you do rename Projects, add a 301 in Wix → SEO → URL Redirect Manager.

Wix Studio → Settings → Custom Code → CSS (or the Custom CSS panel). This gives the orange CTA gradient, hover lift and card behaviour site-wide.

:root{
  --navy-deep:#0A1A33; --navy:#152A4A; --navy-soft:#1E3559;
  --orange:#F97316;    --orange-bright:#FFA340;
  --ink:#F5F7FA;       --steel:#A9B6C9;
}
/* Orange CTA – apply the class in the element's "CSS class" field */
.vts-cta{
  background:linear-gradient(100deg,var(--orange),var(--orange-bright))!important;
  color:var(--navy-deep)!important;
  border:0!important; border-radius:8px!important;
  font-weight:600; letter-spacing:.01em;
  box-shadow:0 12px 30px -12px rgba(249,115,22,.65);
  transition:transform .2s ease, filter .2s ease;
}
.vts-cta:hover{ transform:translateY(-2px); filter:brightness(1.08); }

/* Outlined secondary button */
.vts-ghost{
  background:transparent!important; color:var(--ink)!important;
  border:1px solid var(--navy-soft)!important; border-radius:8px!important;
}
.vts-ghost:hover{ border-color:var(--orange)!important; color:var(--orange)!important; }

/* Product / feature card */
.vts-card{
  background:linear-gradient(160deg,#182F52,#122444);
  border:1px solid var(--navy-soft); border-radius:16px;
  transition:transform .25s ease, border-color .25s ease;
}
.vts-card:hover{ transform:translateY(-4px); border-color:var(--orange); }

/* Orange eyebrow label */
.vts-eyebrow{
  color:var(--orange); text-transform:uppercase;
  letter-spacing:.22em; font-size:12px; font-weight:600;
}
/* Sticky translucent header */
.vts-header{ background:rgba(10,26,51,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08); }

Enable Dev Mode, then paste into the page's Home.js (element IDs must match the IDs you set in the editor panel).

// Home.js — Wix Velo
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

$w.onReady(function () {

  // 1. Shrink + solidify the header after scroll
  let condensed = false;
  $w('#page1').onViewportEnter(() => {});          // keeps the page handler warm
  wixWindow.getBoundingRect().then(() => {});
  $w('#heroSection').onViewportLeave(() => {
    if (!condensed) { $w('#headerStrip').show('fade', { duration: 200 }); condensed = true; }
  });
  $w('#heroSection').onViewportEnter(() => {
    if (condensed) { $w('#headerStrip').hide('fade', { duration: 200 }); condensed = false; }
  });

  // 2. Nav buttons scroll to their sections
  const map = {
    '#navWhy':        '#sectionWhy',
    '#navProducts':   '#sectionProducts',
    '#navIndustries': '#sectionIndustries',
    '#navProjects':   '#sectionProjects',
    '#navContact':    '#sectionContact'
  };
  Object.keys(map).forEach(btn => {
    $w(btn).onClick(() => $w(map[btn]).scrollTo());
  });

  // 3. Hero CTAs
  $w('#ctaQuote').onClick(() => $w('#sectionContact').scrollTo());
  $w('#ctaProducts').onClick(() => $w('#sectionProducts').scrollTo());

  // 4. Click-to-call / mailto (works on desktop + mobile)
  $w('#btnCall').onClick(() => wixLocation.to('tel:+60142883158'));
  $w('#btnEmail').onClick(() => wixLocation.to('mailto:vtsglobal.asia@gmail.com'));

  // 5. Contact form confirmation
  $w('#contactForm').onWixFormSubmitted(() => {
    $w('#formSuccess').text = 'Thanks for submitting! We reply within one business day.';
    $w('#formSuccess').show('fade');
  });
});

Instead of 14 hand-built cards, create a CMS collection Products with fields title, description, tag, datasheet (Document), bind a Repeater to it, then:

// Products repeater
$w('#productsRepeater').onItemReady(($item, itemData) => {
  $item('#pTitle').text = itemData.title;
  $item('#pCopy').text  = itemData.description;

  if (itemData.tag) { $item('#pTag').text = itemData.tag; $item('#pTag').show(); }
  else { $item('#pTag').collapse(); }

  if (itemData.datasheet) {
    $item('#pLearnMore').link   = itemData.datasheet;   // existing /_files/ugd/*.pdf URL
    $item('#pLearnMore').target = '_blank';
  } else {
    $item('#pLearnMore').onClick(() => $w('#sectionContact').scrollTo());
  }
});

Add an Embed → Custom Element (tag vts-stats) and upload this as a JS file, or drop the same markup into an Embed → HTML iFrame block if you prefer no Dev Mode. It is fully self-contained (no external CSS needed).

// vts-stats.js  — Wix Custom Element, tag name: vts-stats
class VtsStats extends HTMLElement {
  connectedCallback() {
    const stats = [
      ['2020',  'ESD turnstile division launched'],
      ['2019',  'WiFi autogate push button'],
      ['15+',   'Distributed brands'],
      ['1-Stop','Supply, install, maintain']
    ];
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = `
      <style>
        :host{ all:initial; font-family:'DM Sans',sans-serif; display:block; }
        .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
        .tile{
          background:linear-gradient(160deg,#182F52,#122444);
          border:1px solid #1E3559; border-radius:14px; padding:20px;
          transition:border-color .25s ease, transform .25s ease;
        }
        .tile:hover{ border-color:#F97316; transform:translateY(-3px); }
        .k{ font-family:'Space Grotesk',sans-serif; font-size:26px;
            font-weight:700; color:#F97316; }
        .v{ color:#A9B6C9; font-size:13px; margin-top:6px; line-height:1.5; }
        @media(max-width:600px){ .grid{ grid-template-columns:1fr; } }
      </style>
      <div class="grid">
        ${stats.map(([k,v]) => `<div class="tile"><div class="k">${k}</div>
          <div class="v">${v}</div></div>`).join('')}
      </div>`;
  }
}
customElements.define('vts-stats', VtsStats);

• Mobile: hero H1 to 34–38px, stat tiles to a single column, products grid to 1 column, sticky Orange call button pinned to the bottom bar.
• Keep the existing SEO titles (they already rank for 'ESD turnstile Malaysia'); refresh the meta descriptions only.
• Add LocalBusiness JSON-LD in Settings → Custom Code (head) with the Puchong address and +6014-288 3158.
• Compress hero and product photos to WebP under 250KB; set alt text on every image.
• Test all 12 PDF links, the tel: and mailto: links, and the form submission before publishing.
• Set 301 redirects in the URL Redirect Manager for any slug you change.