AiESL Website — Multi-Page Edition
Four-page static site. No build step, no server needed for preview.
Just open index.html in a browser, or upload the whole folder to any host.
Files
aiesl-site/
├── index.html Home (hero, features, sizes, how-it-works, ROI, FAQ)
├── products.html Product range + comparison table
├── blog.html Blog index (featured + 6 articles)
├── about.html Company story, timeline, values, contact
├── styles.css Shared stylesheet (all pages)
├── app.js Shared script (nav, modal, ROI, FAQ, reveal)
└── assets/
└── products/ Put your product photos here
1. How to add your own product photos
Photos go in assets/products/. Recommended: JPG or WebP, ~800x800px,
under 200 KB each for fast loading.
On the Products page (products.html)
Each product card has a .prod-visual block with a placeholder and a
comment showing exactly what to paste. Find this:
<div class="prod-visual">
<!-- REPLACE WITH: <img src="assets/products/tag-213.jpg" alt="AiESL 2.13 inch electronic shelf label"> -->
<div class="prod-tag" ...>...</div>
<span class="prod-placeholder">photo placeholder</span>
</div>
Replace the whole inner content with your image:
<div class="prod-visual">
<img src="assets/products/tag-213.jpg" alt="AiESL 2.13 inch electronic shelf label">
</div>
The image auto-fills the box (object-fit: cover). Keep a descriptive
alt text — it helps SEO.
On the About page (about.html)
Same idea — find the .about-visual block and the comment
REPLACE WITH: <img ...> for a company/facility photo.
2. Product links
Each product card on products.html is an <a> tag, already linked to
its real product page on aieinksmart.com:
| Card | Links to |
|---|
| AiESL Tag 2.13" | product-black-shell-213-inch-electronic-shelf-label.html |
| AiESL Tag 2.90" | product-black-shell-29-inch-electronic-shelf-label.html |
| AiESL Tag 13.3" | product-133-inch-full-color-series-e6electronic-retail-label.html |
| AiESL HDaaS Platform | product-aieinksmart-esl-management-system.html |
| AiESL Pricing Agent | product-esl-local-mini-server.html |
| AiESL Flow Camera | product-binocular-intelligent-passenger-flow-counting-machine...html |
To change any of these, edit the href on the matching <a class="prod-card">.
3. How to connect the quote form to a real backend
Open app.js and find the block marked:
>>> BACKEND API INTEGRATION POINT <<<
It currently runs in DEMO MODE (logs the data, shows the success screen,
sends nothing). Three ready-to-use options are written in the comments:
- Option A — your own API endpoint
- Option B — Formspree (no backend needed, just a form ID)
- Option C — HubSpot / Salesforce / CRM webhook
Replace the demo block with one of them and the form goes live.
4. Contact details
Current details (used in every footer + about page):
- Address: Building A1, Yuexiu iPARK Yuegang Zhigu, Nansha District, Guangzhou, Guangdong Province, China
- Email: [email protected]
- Phone: +86-13925118851
To change them, search-and-replace across the .html files.
Going live
Upload the whole aiesl-site/ folder to any static host
(Netlify, Vercel, Cloudflare Pages, GitHub Pages, or traditional hosting).
index.html is the entry point. Before launch, remember to:
- Replace product photo placeholders with real images
- Swap the form from DEMO MODE to a real backend
- Replace retailer names in the marquee with authorized logos
