ما تشريش Stock قبل ما تشوف هاد الطريقة! Cloudways

Create a complete, professional and modern one-product landing page using HTML, CSS and JavaScript.

Use only HTML, CSS and vanilla JavaScript.
Put everything inside one single HTML file.
The page must be responsive on mobile, tablet and desktop.
The page must be lightweight, fast and suitable for paid advertising traffic.
Do not use Bootstrap or external frameworks.
Choose the best product image for the hero section and use the remaining images for the product slider.
Preserve the real product appearance.
Do not invent specifications that I did not provide.
Keep the landing page short, clear and focused on conversion.

Product information:
Product name: [PRODUCT NAME]
Price: [PRICE]
Old price: [OLD PRICE OR LEAVE EMPTY]
Currency: [MAD]
Short description: [SHORT DESCRIPTION]
Specifications: [PASTE PRODUCT SPECIFICATIONS HERE]

Product images:

[IMAGE LINK 1]
[IMAGE LINK 2]
[IMAGE LINK 3]

WhatsApp order information:
WhatsApp phone number: [PHONE NUMBER WITH COUNTRY CODE]
Country: [COUNTRY]
Default quantity: [1]

WhatsApp order message:
Hello, I want to order:
Product: [PRODUCT NAME]
Price: [PRICE]
Quantity: {quantity}
Total: {total}
Customer name: {name}
Phone: {phone}
City: {city}
Address: {address}

Landing page structure:
Announcement bar.
Hero section.
Floating visual elements related to the product.
Main benefits.
Product image slider.
Short specifications.
Usage instructions when relevant.
WhatsApp order form.
Sticky mobile order button.
Footer.

Design style:
Premium e-commerce style.
Clean and minimal.
Soft shadows.
Rounded cards.
Elegant gradients.
Large product photography.
Smooth scrolling.
Modern typography.
Mobile-first and conversion-focused.

Technical requirements:
Include CSS inside a style tag.
Include JavaScript before closing body tag.
Add SEO title and meta description.
Add Open Graph meta tags.
Add product schema markup using JSON-LD.
Add alt text to all images.
Use lazy loading for slider images.
Add accessible labels.
Prevent horizontal overflow on mobile.
Make all buttons and links work.

At the top of JavaScript create one editable configuration object:

const PRODUCT_CONFIG = {
name: "[PRODUCT NAME]",
price: [NUMERIC PRICE],
oldPrice: [NUMERIC OLD PRICE OR 0],
currency: "[CURRENCY]",
whatsappNumber: "[PHONE WITHOUT + OR SPACES]",
images: [
"[IMAGE LINK 1]",
"[IMAGE LINK 2]",
"[IMAGE LINK 3]",
"[IMAGE LINK 4]"
]
};

Use this configuration object throughout the landing page.