شنو غادي تشوف فهاد الفيديو؟

فهاد الفيديو غادي نهضرو على Workflow عملي للمبتدئين فـ E-commerce: كيفاش تاخذ فكرة مشروع ناجح، تفهم علاش خدام، وتخرج Version ديالك بطريقة قانونية ونظيفة. خدمنا على مثال مشروع عطور، ومن أول تحليل للـ Winning Product حتى نشر Landing Page على WordPress.

Winning Product
Labels & Tickets
Photos + AI
Landing Page
Hostinger + WordPress
مهم: الفكرة ماشي أنك تسرق Brand ديال شي واحد، ولا Logo، ولا الصور، ولا الاسم التجاري. استعمل المشروع المرجعي باش تفهم الـ Workflow، ومن بعد بنِ المشروع بلمستك: Brand ديالك، صور ديالك، Labels ديالك، وموقع ديالك.

Chapters ديال الفيديو

إلى بغيتي تمشي مباشرة لأي مرحلة، كليك على الوقت:

00:00Hook 00:43Intro 01:49الفكرة ديال الفيديو 02:43كيفاش نلقاو Winning Product ونحللو المشروع 05:28كيفاش نصايبو Labels و Tickets 08:07تصوير المنتوج وتحسين الصور بـ AI 09:10كيفاش AI يعطينا Landing Page 11:55علاش خاصنا Hosting و Domain 12:22تجربة Hostinger والكود HIKAYAH10 13:58تثبيت WordPress 15:26إنشاء الصفحة ووضع HTML Code 18:06من فكرة بسيطة لمشروع حقيقي 18:40الخلاصة و Part 2

المراحل خطوة بخطوة

هادي هي الخريطة العملية من الفكرة حتى الصفحة تكون Online. الجزء ديال Hostinger وWordPress فصلتو أكثر باش تقدر ترجع ليه بوحدو.

01

حلل المشروع وWinning Product

شوف العرض، المنتوج، الصور، Landing Page، CTA وطريقة الطلب. ما تنسخش الهوية؛ غير فهم علاش الـ Workflow خدام وشنو تقدر تدير بطريقتك.

02

صايب Labels وTickets أصلية

عطِ الـ AI اسم البراند ديالك، أسماء العطور، الحجم والألوان والستايل. استعمل Prompt 01 اللي لتحت باش تخرج Label System متناسق وقابل للتجربة والطباعة.

03

صور المنتوج وحسن الصور بالـ AI

صور المنتوج الحقيقي بوضوح، ومن بعد استعمل Prompt 02 باش تحولو لصور Studio وE-commerce مع الحفاظ على شكل القنينة، اللون، الـ Label والتفاصيل الحقيقية.

04

ولّد Landing Page HTML بالـ AI

عطِ الـ AI صور المنتجات، الاسم، الثمن، العرض، WhatsApp وأي Reference Page. استعمل Prompt 03 للرابط المرجعي، أو Prompt 04 إلا كنت راسم Sketch بيدك.

05

سجّل فـ Hostinger

دخل من رابط Hostinger المذكور فالفيديو، اختار الخطة المناسبة ليك وكمل إنشاء الحساب. فمرحلة الأداء تقدر تستعمل الكود HIKAYAH10 باش تستافد من 10% OFF حسب العرض المتاح وقت الشراء.

  • دخل للرابط الرسمي اللي لتحت.
  • اختار Hosting plan على حساب المشروع ديالك.
  • دير الحساب وكمل معلومات الأداء.
  • دخل HIKAYAH10 فخانة Coupon إلا كانت ظاهرة.
06

ركّب WordPress من hPanel

من بعد ما تكمل Hostinger، دخل لـ hPanel ومن Websites اختار إنشاء Website جديد، ومن بعد اختار WordPress. حدد Domain، ودير Admin email وPassword اللي غادي تدخل بهم لـ wp-admin.

  • hPanel → Websites
  • Add / Create Website
  • اختار WordPress
  • ربط Domain ديالك
  • حدد WordPress admin login
07

دخل لـ WordPress وصايب Page جديدة

افتح WordPress Dashboard، مشي لـ Pages → Add New، سمي الصفحة مثلاً Landing Page، ومن بعد استعمل Elementor إلا كان مركب عندك. إلى كنت خدام بـ Elementor، جرّ Widget ديال HTML للصفحة.

  • WordPress → Pages → Add New
  • كتب اسم الصفحة
  • Edit with Elementor
  • جرّ HTML Widget للبلاصة اللي بغيتي
08

Paste HTML Code وجرّب الصفحة قبل Publish

لسّق الـ HTML Code اللي عطاك AI داخل HTML Widget، ومن بعد Preview الصفحة. جرّب الصور، العربية، الموبايل، WhatsApp buttons، الفورم وأي Slider قبل ما تضغط Publish.

  • Paste الكود كامل داخل HTML Widget
  • Preview على Desktop وMobile
  • جرّب جميع CTA والروابط
  • Update / Publish منين كلشي يخدم

Hostinger — الرابط والكود المذكورين فالفيديو

استعمل الرابط، ومن بعد دخل الكود HIKAYAH10 فمرحلة الشراء إذا كان متاح فالعرض اللي ظاهر ليك.

HIKAYAH10
فتح Hostinger Coupon: HIKAYAH10 — 10% OFF حسب العرض المتاح.

الأسعار، الخطط والتخفيضات كتقدر تتبدل مع الوقت، لذلك راجع السعر النهائي اللي ظاهر ليك قبل الأداء.

Part 2: من بعد ما المشروع يكون Online، غادي نكملو كيفاش نصورو Reels، نطلعوهم فـ Instagram وFacebook بأحسن Quality، وكيفاش نطلقو Ads للمشروع.

Prompts الجاهزين من HIKAYAH

بدّل غير المعلومات اللي بين الأقواس بحال Brand Name، الصور، WhatsApp، الأسعار والرابط المرجعي.

4 PROMPTS
01

Prompt 01 — تصميم Labels احترافية للعطور

Use the uploaded bottle photos as the ONLY physical reference for the perfume bottles.

I want you to create a complete perfume label and product mockup system for my brand.

BRAND NAME:

[BRAND_NAME]

BOTTLE SIZE:

[SIZE_ML]

FRAGRANCE LIST:

[FRAGRANCE_1]

[FRAGRANCE_2]

[FRAGRANCE_3]

[FRAGRANCE_4]

Important:

- Keep the bottle shape based on the uploaded photos.

- Do not redesign the bottle itself.

- Preserve the bottle proportions, transparent glass, cap shape, spray tube, bottle neck, and realistic reflections.

- Preserve the real liquid color of each bottle when visible in the uploaded photos.

- Create an ORIGINAL brand identity for my brand, not a copy of another luxury brand.

- The final result must look professional, elegant, premium, minimal, and ready for commercial use.

━━━━━━━━━━━━━━━━━━━━━━

1) CREATE THE LABEL DESIGN

━━━━━━━━━━━━━━━━━━━━━━

Create a premium minimalist adhesive front label for each fragrance.

Label style:

- elegant

- luxury

- clean

- modern

- minimal

- masculine / unisex perfume look

- print-friendly

- readable typography

- balanced composition

- commercially realistic

Each label must include:

- [BRAND_NAME]

- fragrance name

- "EAU DE PARFUM"

- [SIZE_ML]

Optional:

- small monogram based on the brand initials

- thin decorative lines

- a very subtle accent color matching each fragrance / liquid color

The label should be:

- rectangular

- centered on the front of the bottle

- proportionate to the bottle

- not too large

- not touching the curved shoulder

- not extending into the thick glass base

Use a consistent brand system across all fragrances:

- same overall layout

- same typography family

- same premium style

- only change the fragrance name and accent color

━━━━━━━━━━━━━━━━━━━━━━

2) ESTIMATE LABEL SIZE

━━━━━━━━━━━━━━━━━━━━━━

Based on the uploaded bottle photos, estimate the most suitable front label size.

Provide:

- recommended label width in mm

- recommended label height in mm

- bleed: 3 mm

- safe margin: 3 mm

Important:

State clearly that this size is an estimate based on the bottle photos and should be confirmed by printing one real test sticker before mass production.

━━━━━━━━━━━━━━━━━━━━━━

3) CREATE PRINT-READY LABEL FILES

━━━━━━━━━━━━━━━━━━━━━━

Create:

A. one flat label design preview showing all fragrance label designs together

B. one A4 print sheet with multiple copies of the labels arranged for printing

C. a print-ready PDF version of the label sheet if supported

D. a clean PNG preview of the label sheet

Requirements for the print sheet:

- real physical dimensions

- crop marks / cut guides

- 300 DPI quality

- clean white background

- no bottle in the print file

- no unnecessary shadows

- no mockup effects

- professional print-ready layout

If direct PDF export is supported, generate a print-ready PDF.

If direct PDF export is not supported, create the A4 print-ready layout so it can be exported to PDF afterward.

━━━━━━━━━━━━━━━━━━━━━━

4) APPLY THE LABELS TO THE REAL BOTTLES

━━━━━━━━━━━━━━━━━━━━━━

Apply each label to its matching bottle using the uploaded bottle photos as the reference.

The labels must:

- look naturally attached to the bottle

- follow the bottle curvature realistically

- be centered and proportional

- have realistic perspective

- not look fake or floating

- preserve realistic glass reflections and transparency

━━━━━━━━━━━━━━━━━━━━━━

5) CREATE FINAL STUDIO PRODUCT PHOTOS

━━━━━━━━━━━━━━━━━━━━━━

For EACH fragrance, generate 3 separate professional studio product photos on a pure white background.

Photo 1 — FRONT VIEW

- bottle centered

- label facing directly forward

- clean studio lighting

- soft realistic shadow

- full bottle visible

- premium ecommerce photography look

Photo 2 — SIDE / 3-QUARTER VIEW

- bottle at a 30–45 degree angle

- show bottle depth

- show glass thickness

- label still visible

- clean white background

- professional studio reflections

Photo 3 — HIGH CTR HERO SHOT

- most attractive commercial angle

- visually strong and premium

- perfect for ads / thumbnails / ecommerce

- elegant lighting

- bottle remains the only subject

- clean white background

Important:

- no decorative props

- no flowers

- no leaves

- no stones

- no smoke

- no splashes

- no fruits

- no fake scenery

- only the perfume bottle on white studio background

━━━━━━━━━━━━━━━━━━━━━━

6) CONSISTENCY

━━━━━━━━━━━━━━━━━━━━━━

All final bottle images must look like they were photographed in the same studio session.

Keep consistent:

- lighting style

- white background

- camera quality

- bottle proportions

- label size

- typography

- brand identity

Only change:

- fragrance name

- liquid color if different

- subtle accent color on the label

━━━━━━━━━━━━━━━━━━━━━━

7) FINAL DELIVERABLES

━━━━━━━━━━━━━━━━━━━━━━

Deliver:

1. one label collection preview with all fragrances

2. one A4 print sheet with multiple labels

3. one print-ready PDF if supported

4. for each fragrance: 3 studio photos

   - front

   - 3/4 side

   - hero / CTR angle

Before finalizing, double-check:

- spelling is correct

- the brand name is correct

- fragrance names are correct

- label text is clean and readable

- bottle shape matches the uploaded photos

- cap shape matches the uploaded photos

- no deformed glass

- no broken typography

- no extra bottle parts

- no unrealistic reflections
02

Prompt 02 — تحويل صور العطر إلى صور E-commerce احترافية

Use the uploaded perfume bottle photos as the ONLY product reference.

I want you to transform these real perfume photos into clean, premium, studio-quality product images suitable for a landing page / ecommerce website.

If multiple bottle photos are uploaded:

- treat each bottle as a separate perfume product unless clearly shown as alternate angles of the same bottle

- generate the requested outputs for each perfume separately

- do not mix the perfumes together unless I explicitly ask for a group shot

Important:

- preserve the real bottle shape from the uploaded photos

- preserve the real cap shape

- preserve the real glass proportions

- preserve the visible spray tube naturally

- preserve the real liquid color

- preserve the identity of the product

- do not redesign the bottle

- do not invent a new bottle shape

- do not distort the bottle

- remove the hand and remove the original room/background

- keep the final bottle clean, realistic, and premium

Brand name:

[BRAND_NAME]

Bottle size:

[SIZE_ML]

Optional fragrance name:

[OPTIONAL_FRAGRANCE_NAME]

Goal:

Create 3 separate final product images for EACH perfume bottle.

━━━━━━━━━━━━━━━━━━━━━━

1) IMAGE 1 — FRONT STUDIO SHOT

━━━━━━━━━━━━━━━━━━━━━━

Create a straight front-facing studio product photo.

Requirements:

- pure white seamless background

- bottle centered

- label facing directly toward camera if a label exists

- if the uploaded bottle has no label, keep it clean and unlabeled

- full bottle visible

- realistic studio lighting

- soft natural shadow under the bottle

- clean glass reflections

- premium ecommerce product photography look

- sharp focus

- landing-page ready

- no props

- no extra objects

- no decorative elements

━━━━━━━━━━━━━━━━━━━━━━

2) IMAGE 2 — SIDE / 3-QUARTER STUDIO SHOT

━━━━━━━━━━━━━━━━━━━━━━

Create a second studio product photo from a side or 3/4 angle.

Requirements:

- pure white seamless background

- bottle shown at approximately 30–45 degrees

- show bottle depth and glass thickness

- preserve cap shape and bottle curvature

- label still visible if present

- realistic reflections

- soft studio shadow

- premium clean commercial look

- full bottle visible

- no props

- no extra objects

- no decorative elements

━━━━━━━━━━━━━━━━━━━━━━

3) IMAGE 3 — HERO SHOT WITH COLORIZED BACKGROUND

━━━━━━━━━━━━━━━━━━━━━━

Create a premium hero image for the landing page.

Requirements:

- use a clean, elegant, colorized background inspired by the perfume liquid color and the fragrance mood

- the background must complement the perfume color and fragrance style

- keep it refined, modern, premium, and not too busy

- the bottle must remain the main focus

- use a commercial beauty/product photography style

- add subtle depth, soft glow, or gradient lighting if appropriate

- keep the scene luxurious and website-ready

- no cheap effects

- no clutter

- no distracting elements

Background direction:

- for green / fresh perfumes: use fresh, botanical, crisp, clean tones

- for blue / aqua perfumes: use aquatic, cool, refreshing tones

- for purple perfumes: use soft elegant, floral, dreamy, or luxurious tones

- for darker masculine perfumes: use deeper, rich, sophisticated tones

Important:

- keep the background visually attractive but still minimal

- the bottle must stay isolated and easy to read

- ideal for hero section / banner / product spotlight on a landing page

━━━━━━━━━━━━━━━━━━━━━━

4) CONSISTENCY

━━━━━━━━━━━━━━━━━━━━━━

All final images must look like they were photographed in the same professional studio session.

Keep consistent:

- image quality

- realism

- bottle proportions

- cap shape

- glass material

- clean reflections

- premium look

- commercial photography quality

Only change:

- camera angle

- background style for the hero shot

- lighting emphasis depending on the image type

━━━━━━━━━━━━━━━━━━━━━━

5) QUALITY CONTROL

━━━━━━━━━━━━━━━━━━━━━━

Before finalizing, verify:

- bottle shape matches the uploaded photo

- cap shape matches the uploaded photo

- liquid color matches the uploaded photo

- no hand remains visible

- no original room/background remains visible

- no warped glass

- no duplicate bottle parts

- no malformed cap

- no broken reflections

- no unrealistic label distortion

- no extra props unless explicitly requested

━━━━━━━━━━━━━━━━━━━━━━

6) FINAL OUTPUT

━━━━━━━━━━━━━━━━━━━━━━

For EACH perfume bottle, deliver exactly 3 separate images:

1. Front studio shot — white background

2. Side / 3-quarter studio shot — white background

3. Hero shot — colorized premium background based on perfume color and fragrance mood

Do not deliver collages unless requested.

Deliver each image as a separate final image.
03

Prompt 03 — إنشاء Landing Page من رابط مرجعي

I want you to build a complete, production-ready landing page in HTML/CSS/JavaScript based on a reference landing page that I will provide.

REFERENCE LANDING PAGE URL:

[REFERENCE_URL]

MY BRAND:

[BRAND_NAME]

WHATSAPP NUMBER:

[WHATSAPP_NUMBER_WITH_COUNTRY_CODE]

PRODUCT INFORMATION:

[PRODUCT_NAMES]

[PRODUCT_PRICES]

[PRODUCT_DESCRIPTIONS]

[OPTIONAL_OFFERS]

[OPTIONAL_DELIVERY_INFO]

PRODUCT IMAGES:

I will upload the real product images separately.

IMPORTANT:

Use the reference URL ONLY as a visual, structural, layout, UX, and conversion-flow reference.

Do NOT:

- copy copyrighted text verbatim

- copy the original brand name

- copy the original logo

- copy proprietary images

- copy trademarks

- copy unique protected illustrations or assets

- hotlink assets from the reference website

Instead, recreate an ORIGINAL implementation inspired by:

- its page structure

- spacing

- section order

- typography hierarchy

- card layouts

- CTA placement

- visual rhythm

- mobile experience

- conversion strategy

Adapt everything to MY brand and MY products.

━━━━━━━━━━━━━━━━━━━━

1. ANALYZE THE REFERENCE PAGE

━━━━━━━━━━━━━━━━━━━━

First inspect the reference landing page carefully.

Identify:

- header structure

- announcement bar

- hero section

- product presentation

- benefits

- product cards

- pricing

- offers

- testimonials

- FAQ

- trust elements

- delivery/payment information

- call-to-action sections

- footer

- sticky mobile elements

- animations/interactions

- desktop layout

- mobile layout

Do not simply describe the page.

Use the analysis to recreate a new original landing page adapted to my business.

━━━━━━━━━━━━━━━━━━━━

2. USE MY PRODUCT IMAGES

━━━━━━━━━━━━━━━━━━━━

Use the product images I upload.

Do not replace them with random stock photos.

Preserve:

- product shape

- product colors

- product labels

- real product appearance

Use the images professionally throughout the landing page.

If several product photos exist, intelligently assign them to:

- hero section

- product gallery

- product cards

- feature sections

- mobile layout

Use CSS object-fit correctly so images are not stretched.

━━━━━━━━━━━━━━━━━━━━

3. DESIGN DIRECTION

━━━━━━━━━━━━━━━━━━━━

Create a professional ecommerce landing page that looks premium and trustworthy.

The result should feel like a real commercial website, not an AI-generated template.

Requirements:

- modern

- clean

- premium

- high-converting

- mobile-first

- responsive

- visually balanced

- fast loading

- easy to read

- strong CTA hierarchy

Use the reference page's general visual direction when appropriate, but create an original design implementation.

━━━━━━━━━━━━━━━━━━━━

4. WHATSAPP ORDER SYSTEM

━━━━━━━━━━━━━━━━━━━━

The main conversion goal is ordering through WhatsApp.

WhatsApp number:

[WHATSAPP_NUMBER_WITH_COUNTRY_CODE]

Create prominent WhatsApp order buttons throughout the page.

Examples:

- Commander maintenant

- Acheter maintenant

- Commander via WhatsApp

- Je veux ce produit

Use the correct WhatsApp URL format.

When a customer clicks a product CTA, automatically open WhatsApp with a pre-filled message.

Example structure:

Bonjour, je souhaite commander :

Produit : [PRODUCT_NAME]

Prix : [PRODUCT_PRICE]

Je souhaite passer ma commande.

For product-specific buttons, automatically insert the correct product name and price.

If there are product variants, also include the selected variant in the WhatsApp message.

Encode the WhatsApp message correctly in the URL.

━━━━━━━━━━━━━━━━━━━━

5. MOBILE STICKY CTA

━━━━━━━━━━━━━━━━━━━━

On mobile devices, add a fixed sticky CTA at the bottom of the screen.

Example:

[ Commander sur WhatsApp ]

Requirements:

- clearly visible

- not intrusive

- safe spacing for mobile browser UI

- does not cover important page content

- linked to the correct WhatsApp number

━━━━━━━━━━━━━━━━━━━━

6. PRODUCT SECTION

━━━━━━━━━━━━━━━━━━━━

Create clean product cards using my real product images.

Each product card should support:

- product image

- product name

- short description

- price

- optional old price

- optional discount badge

- optional best seller badge

- CTA button

Example:

[PRODUCT NAME]

Short benefit-focused description

299 MAD

instead of 399 MAD

[COMMANDER MAINTENANT]

Clicking the button should open WhatsApp with that exact product information.

━━━━━━━━━━━━━━━━━━━━

7. LANDING PAGE STRUCTURE

━━━━━━━━━━━━━━━━━━━━

Adapt the final section order according to the reference page.

When appropriate, include:

1. Announcement bar

2. Header / logo

3. Hero section

4. Main CTA

5. Product highlights

6. Why choose us

7. Product collection

8. Benefits

9. Offer / promotion

10. How to order

11. Customer testimonials

12. Delivery / payment information

13. FAQ

14. Final CTA

15. Footer

16. Mobile sticky WhatsApp CTA

Do not add unnecessary sections just to make the page longer.

━━━━━━━━━━━━━━━━━━━━

8. COPYWRITING

━━━━━━━━━━━━━━━━━━━━

Do not copy text from the reference website.

Write original conversion-focused copy based on my product information.

Keep the copy:

- concise

- credible

- natural

- commercially persuasive

- easy to scan

Do not invent:

- fake certifications

- fake guarantees

- fake reviews

- fake statistics

- fake discounts

- fake free shipping

- fake scarcity

- fake customer counts

Only use offers and claims I explicitly provide.

If some information is missing, use clearly marked placeholders instead of inventing facts.

━━━━━━━━━━━━━━━━━━━━

9. TESTIMONIALS

━━━━━━━━━━━━━━━━━━━━

If I do not provide real testimonials:

Do NOT invent customer names and fake reviews.

Instead either:

- omit the section

OR

- insert clearly marked placeholder testimonials for me to replace later.

━━━━━━━━━━━━━━━━━━━━

10. TECHNICAL REQUIREMENTS

━━━━━━━━━━━━━━━━━━━━

Create a complete standalone website.

Preferred format:

index.html

Include the CSS and JavaScript inside the same HTML file unless separating files clearly improves maintainability.

Use:

- semantic HTML5

- clean CSS

- vanilla JavaScript where possible

- CSS variables

- reusable classes

- responsive breakpoints

- accessible buttons and links

Avoid unnecessary libraries.

Do not require:

- WordPress

- React

- Node.js

- build tools

- npm

unless I specifically request them.

The final HTML should work by opening index.html directly in a browser.

━━━━━━━━━━━━━━━━━━━━

11. RESPONSIVE DESIGN

━━━━━━━━━━━━━━━━━━━━

Optimize carefully for:

Desktop:

1920px

1440px

1366px

Tablet:

768px–1024px

Mobile:

390px

375px

360px

Do not simply shrink the desktop version.

Create a proper mobile layout.

Check:

- navigation

- hero

- text sizes

- product cards

- buttons

- images

- spacing

- FAQ

- sticky CTA

- footer

━━━━━━━━━━━━━━━━━━━━

12. PERFORMANCE

━━━━━━━━━━━━━━━━━━━━

Optimize the page for good loading performance.

Use:

- lazy loading for below-the-fold images

- proper image dimensions

- minimal JavaScript

- lightweight CSS

- no unnecessary dependencies

- smooth but subtle animations

Avoid excessive effects that reduce performance.

━━━━━━━━━━━━━━━━━━━━

13. SEO

━━━━━━━━━━━━━━━━━━━━

Include:

- page title

- meta description

- viewport

- Open Graph tags

- semantic headings

- descriptive image alt text

- basic product structured data when appropriate

Use placeholders when information has not been provided.

━━━━━━━━━━━━━━━━━━━━

14. IMPORTANT IMAGE HANDLING

━━━━━━━━━━━━━━━━━━━━

Do not use random placeholder images when I already uploaded the real products.

In the final code, use simple local paths such as:

images/product-1.webp

images/product-2.webp

images/product-3.webp

Clearly tell me which uploaded photo corresponds to each filename.

Example:

Uploaded green bottle → images/product-green.webp

Uploaded purple bottle → images/product-purple.webp

This makes it easy for me to upload everything to my hosting.

━━━━━━━━━━━━━━━━━━━━

15. CODE QUALITY

━━━━━━━━━━━━━━━━━━━━

Before delivering, check the entire code for:

- broken HTML

- missing closing tags

- JavaScript errors

- broken WhatsApp links

- duplicate IDs

- mobile overflow

- horizontal scrolling

- incorrect image paths

- unusable buttons

- poor contrast

- responsive problems

Make sure all CTA buttons actually work.

━━━━━━━━━━━━━━━━━━━━

16. FINAL DELIVERY FORMAT

━━━━━━━━━━━━━━━━━━━━

Do not only explain how to build the page.

Actually provide the complete working code.

Deliver:

1. Short summary of the page structure

2. File/folder structure

3. Complete index.html

4. Any additional files if absolutely necessary

5. Image filename mapping

6. Clearly marked areas I may want to edit later

Use comments inside the HTML such as:

\<!-- HERO SECTION -->

\<!-- PRODUCTS -->

\<!-- WHATSAPP CTA -->

\<!-- FAQ -->

\<!-- FOOTER -->

so the code remains easy to modify.

━━━━━━━━━━━━━━━━━━━━

17. FINAL GOAL

━━━━━━━━━━━━━━━━━━━━

The result should be a ready-to-use ecommerce landing page inspired by the provided reference URL but fully adapted to:

Brand:

[BRAND_NAME]

Products:

[PRODUCT_INFORMATION]

WhatsApp:

[WHATSAPP_NUMBER]

The website must look professional enough to use for real paid advertising traffic and real customer orders.
04

Prompt 04 — تحويل Sketch مرسوم باليد إلى Landing Page HTML

I will upload a photo of a landing-page sketch that I drew by hand.

Your task is to understand the sketch as a UI/UX wireframe and transform it into a professional, modern, responsive landing page.

The sketch is a STRUCTURAL REFERENCE, not a pixel-perfect design.

Interpret:

- boxes as sections/cards/images/forms

- arrows as navigation, flow, animation, or section relationships

- handwritten labels as section purposes

- rough proportions as approximate layout hierarchy

- handwritten notes such as "auto scroll", "buy form", "features", etc. as functional requirements

Do not reproduce the notebook paper, handwriting, or rough drawing style in the final website.

Create a clean commercial website based on the idea behind the sketch.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 1 — UNDERSTAND THE SKETCH

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Carefully inspect the uploaded hand-drawn sketch.

Determine:

- header structure

- logo / brand location

- navigation

- hero section

- product images

- product information

- features

- product slider/carousel

- offer sections

- order form

- WhatsApp CTA

- footer

- arrows / interactions

- desktop layout

- mobile layout

If something in the sketch is unclear, use good ecommerce UX judgment while staying faithful to the general idea.

Do not unnecessarily redesign the concept.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 2 — CREATE A VISUAL MOCKUP FIRST

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Before writing the final HTML code, create a clean visual mockup showing approximately how the finished landing page should look.

The mockup should transform the rough sketch into a professional website concept.

Style:

- modern

- clean

- premium

- ecommerce-oriented

- visually balanced

- high-converting

- mobile-friendly

- realistic website UI

- professional typography

- good spacing

- clear CTA buttons

The visual mockup should show:

- header

- hero

- products

- images

- features

- buttons

- forms

- footer

- all important sections visible in the sketch

Use placeholder product images if the real product photos have not yet been uploaded.

If real product images are uploaded, use those products as the visual reference.

Do not create a completely different layout.

The mockup should clearly resemble a refined professional version of my hand-drawn sketch.

If image generation is available, generate the visual mockup as an image.

If image generation is not available, create a clearly structured wireframe preview before proceeding to the code.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 3 — BUILD THE REAL LANDING PAGE

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

After the visual concept, create the actual functional landing page.

The website will be used inside WordPress.

Create ONE paste-ready HTML snippet that I can insert inside a WordPress "Custom HTML" block.

Use:

- HTML5

- CSS

- vanilla JavaScript

Keep everything inside one code snippet when possible.

Do NOT require:

- React

- Vue

- npm

- Node.js

- PHP

- Elementor Pro

- external build tools

Do not include:

\<html>

\<head>

\<body>

unless absolutely required.

The code should be designed to work inside an existing WordPress page.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

VERY IMPORTANT — PREVENT WORDPRESS THEME CONFLICTS

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Namespace all CSS classes with a unique prefix.

Example:

.lp-

landing-

brandlp-

Do not use overly generic CSS selectors such as:

button {}

img {}

h1 {}

section {}

.container {}

Instead use scoped selectors such as:

.hlp-wrapper

.hlp-hero

.hlp-product-card

.hlp-btn

Wrap the entire landing page inside one unique parent:

\<div id="custom-landing-page">

All CSS should be scoped under this landing-page wrapper whenever possible.

Do not modify WordPress global styles.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 4 — MAKE EDITING EXTREMELY EASY

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

At the beginning of the final code, create a clearly visible configuration section.

Write this exact comment:

/\* ========================================

   EDIT ONLY THIS SECTION

   ======================================== \*/

Put all important editable information there.

I should NOT need to search throughout the HTML code.

Include editable values for:

BRAND NAME

WHATSAPP NUMBER

WHATSAPP DEFAULT MESSAGE

PRODUCT NAMES

PRODUCT PRICES

OLD PRICES

PRODUCT DESCRIPTIONS

PRODUCT IMAGE URLs

OPTIONAL PRODUCT COLORS

OPTIONAL PRODUCT VARIANTS

DELIVERY TEXT

PAYMENT TEXT

CTA TEXT

For example:

const SITE_CONFIG = {

    brandName: "YOUR BRAND",

    whatsappNumber: "212600000000",

    whatsappMessage:

    "Bonjour, je souhaite passer une commande.",

    products: [

        {

            name: "Product 1",

            price: "199 DH",

            oldPrice: "",

            image: "PRODUCT_IMAGE_URL_1",

            description: "Product description"

        },

        {

            name: "Product 2",

            price: "249 DH",

            oldPrice: "",

            image: "PRODUCT_IMAGE_URL_2",

            description: "Product description"

        }

    ]

};

Use these configuration values throughout the landing page whenever technically practical.

Clearly explain where this configuration is located.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 5 — PRODUCT IMAGES

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Make product images very easy to replace.

Use clear placeholders such as:

PRODUCT_IMAGE_URL_1

PRODUCT_IMAGE_URL_2

PRODUCT_IMAGE_URL_3

PRODUCT_IMAGE_URL_4

If I upload my own product photos, map each image clearly.

Example:

Green bottle:

PRODUCT_IMAGE_URL_1

Purple bottle:

PRODUCT_IMAGE_URL_2

Blue bottle:

PRODUCT_IMAGE_URL_3

Do not embed random stock images if I already provided real product photos.

Use:

object-fit: contain;

when appropriate so products are never stretched.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 6 — WHATSAPP ORDER SYSTEM

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

WhatsApp is the primary conversion method.

Create working WhatsApp buttons.

The editable phone number must exist only in the configuration section whenever possible.

Format:

Country code + number

without "+" or spaces.

Example:

212600000000

Every CTA should automatically use this number.

When the customer clicks a product button, generate a pre-filled WhatsApp message.

Example:

Bonjour,

Je souhaite commander :

Produit : PRODUCT NAME

Prix : PRODUCT PRICE

Merci.

Automatically use the correct product information.

Properly URL-encode the WhatsApp message.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 7 — PRODUCT ORDER FORM

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

If the sketch contains a "buy form", "order form", or similar element, create a simple order form.

Possible fields:

- Full name

- Phone

- City

- Product

- Quantity

Do not require a backend.

When the customer submits the form:

Generate a WhatsApp message containing the entered information and open WhatsApp.

Example:

Nouvelle commande

Nom : ...

Téléphone : ...

Ville : ...

Produit : ...

Quantité : ...

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 8 — PRODUCT CAROUSEL / AUTO SCROLL

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

If the sketch indicates:

- auto scroll

- dots

- carousel

- slider

- arrows

implement a lightweight product carousel using vanilla JavaScript.

Requirements:

- touch/swipe friendly

- mobile responsive

- navigation dots if shown in the sketch

- optional arrows if appropriate

- automatic scrolling if indicated

- pause when the user interacts with it

- no heavy libraries

Do not add a slider if the sketch clearly does not require one.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 9 — RESPONSIVE DESIGN

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Create proper layouts for:

Desktop:

1920px

1440px

1366px

Tablet:

768px–1024px

Mobile:

430px

390px

375px

360px

Do not simply shrink the desktop page.

Reorganize sections intelligently on mobile.

Check:

- hero

- navigation

- images

- product cards

- sliders

- forms

- typography

- spacing

- WhatsApp buttons

- footer

There must be NO horizontal page scrolling.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 10 — MOBILE WHATSAPP BUTTON

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

If appropriate for the landing page, create a sticky mobile CTA at the bottom:

COMMANDER SUR WHATSAPP

Requirements:

- visible on mobile

- fixed at bottom

- professional

- not too large

- does not cover important content

- safe-area support for modern phones

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 11 — DESIGN QUALITY

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Transform the rough sketch into a professional interface.

Pay attention to:

- spacing

- alignment

- typography hierarchy

- product image sizing

- section rhythm

- contrast

- CTA visibility

- trust

- ecommerce conversion

The result should NOT look like a generic AI template.

Use the hand-drawn sketch's intended structure as the foundation.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 12 — CONTENT RULES

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Do not invent:

- customer reviews

- certifications

- guarantees

- discounts

- shipping claims

- statistics

- awards

- fake urgency

- fake stock counters

If information is missing, use an obvious placeholder such as:

[DELIVERY INFORMATION]

[PRODUCT DESCRIPTION]

[PRICE]

[TESTIMONIAL]

rather than inventing business claims.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 13 — PERFORMANCE

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Keep the code lightweight.

Use:

- vanilla JavaScript

- CSS transitions

- lazy-loading for below-the-fold images

- responsive images where practical

- efficient CSS

Avoid:

- large libraries

- unnecessary fonts

- unnecessary animations

- excessive JavaScript

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP 14 — FINAL CODE CHECK

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Before delivering the code, verify:

- HTML is valid

- CSS works

- JavaScript has no syntax errors

- WhatsApp buttons work

- product-specific messages work

- mobile layout works

- carousel works if included

- forms work if included

- no duplicate IDs

- no horizontal overflow

- images are not stretched

- WordPress theme styles should not break the landing page

- landing-page styles should not break the WordPress theme

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

FINAL DELIVERY

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Deliver the result in this exact order:

1. VISUAL MOCKUP / SKETCH PREVIEW

Show how the final professional landing page will look based on my drawing.

2. STRUCTURE

Briefly list the interpreted page sections.

3. COMPLETE WORDPRESS HTML

Provide the complete paste-ready code for a WordPress Custom HTML block.

4. EDITING GUIDE

Explicitly show me:

WHERE TO CHANGE BRAND NAME

WHERE TO CHANGE WHATSAPP NUMBER

WHERE TO CHANGE PRODUCT IMAGES

WHERE TO CHANGE PRODUCT NAMES

WHERE TO CHANGE PRICES

WHERE TO CHANGE TEXT

Use the exact headings:

CHANGE BRAND HERE:

CHANGE WHATSAPP HERE:

CHANGE PRODUCTS HERE:

CHANGE IMAGES HERE:

5. TESTING

Confirm that the HTML, CSS and JavaScript have been checked before delivery.

Do not stop after explaining the concept.

Actually create the visual concept AND the complete code.

قبل ما تنشر Landing Page

دير هاد المراجعة السريعة باش ما تطلعش الصفحة ناقصة:

راجع المحتوى والهوية

اسم البراند، الأسعار، أسماء المنتجات، الصور والـ Labels يكونو ديالك ومكتوبين بشكل صحيح.

جرّب الموبايل

تأكد ما كاينش horizontal scroll، النص مقروء، والصور والأزرار متناسقين على الهاتف.

جرّب جميع CTA

WhatsApp، order buttons والروابط خاصهم يفتحو الوجهة الصحيحة بالمعلومات الصحيحة.