Layout of the main page of the website

We want to update the main page of the website and adapt it to the WHCMS engine (HTML + PHP)

There is a ready design, we need to create the layout using an already prepared template.

I am also attaching the technical specifications:

1. General Provisions

• Layout exactly according to Figma mockups: sizes, margins, typography, colors, element states (hover, active).

• The code must be adapted to the WHMCS template (Smarty / PHP files).

• Mandatory responsiveness: design for desktop, tablet, mobile.

• Cross-browser compatibility: Chrome, Firefox, Safari, Edge (current versions).

• Resource optimization: minification of CSS/JS, lazy-load for images, SVG for icons, use of WebP if possible.

• HTML semantics, correct tags (header, nav, main, footer, etc.).

• Clear CSS structure (BEM, SMACSS methodologies or similar can be used).

• Attention to element states (buttons on hover, active menus, etc.).

2. Page Structure (based on Figma mockup, conditionally)

Below are approximate blocks corresponding to the Figma mockup:

1. Header

   • Logo on the left.

   • Main menu (navigation items).

   • “Login / Registration” buttons (using styles from the mockup).

   • Possibly — language / currency switcher.

   • Background fill / effect (shadows, gradients) — as in the mockup.

   • Fixed header on scroll (if this is included in the design).

2. Hero / banner / first screen

   • Title + subtitle — styles and sizes from the mockup.

   • CTA (Call-to-Action) button — color, hover effect.

   • Background (image / illustration / pattern), possibly parallax or light animation.

3. Benefits / Features Block

   • Icons + texts.

   • Layout (row, cards, grid).

   • Margins and alignments — as in the mockup.

4. Pricing / Plans Block

   • Pricing cards, inside:

     • Plan name

     • Price

     • Features

     • “Order / Select” button

   • The mockup may have “best choice / recommended” — this needs to be visually implemented.

   • Ability to dynamically substitute prices from WHMCS (PHP variables).

5. Domain Check Block

   • Domain input field + zone selection (select).

   • “Check” button — styled.

   • Check results (external block) — as in the mockup.

6. Reviews / Cases / Clients

   • Slider / carousel (with controls).

   • Photos / avatars + quotes + name / position.

   • Intervals and margins — as in the mockup.

7. FAQ / Frequently Asked Questions

   • Accordion (open / closed states).

   • Open animation, arrow icons — according to the design.

8. CTA Block / Additional Call to Action

   • Bright background / fill.

   • Title + button → registration / start / order.

   • Hover effects, shadows, etc.

9. Footer

   • Several columns (Menu, Support, Contacts, etc.).

   • Logo, social icons.

   • Copyright + small links (Privacy Policy, Terms, etc.).

   • Background color, margins, and visual elements — as in the mockup.

3. Integration with WHMCS / Functional Aspects

• Template files (clientarea.tpl, header.tpl, footer.tpl, etc.) are adjusted so that the main page is accessible as part of WHMCS (for example, through index.php of the client template).

• Text blocks (headings, descriptions) — either through WHMCS language files or through template variables (to be editable through the admin panel).

• Pricing — pulled through WHMCS (PHP/Smarty), instead of static numbers.

• Order buttons lead to cart.php?a=add&pid=ID or to order.php with the correct parameter.

• Domain check form → domainchecker.php WHMCS (or WHMCS API endpoint).

• Authorization / registration — links lead to WHMCS pages login.php, register.php.

• If the mockup has elements dependent on authorization (for example, “Hello, [name]” or “My account”) — consider conditional generation through Smarty ({if $loggedin} etc.).

• Connecting CSS/JS — through the standard WHMCS pipeline (to avoid conflicts).

• Use WHMCS caching capabilities where possible, without breaking dynamics.

4. Technical / Details

• CSS and JS — separate if possible: base + components + pages.

• Use a preprocessor (Sass / Less) if it is already provided in the project.

• Minification in release.

• Image loading — srcset and sizes for responsive images.

• Lazy-loading for off-screen images.

• Icons — SVG, inline code, or sprites.

• Validation check for HTML/CSS (W3C).

• Readiness for SEO: alt tags, headings (h1, h2…), correct nesting.

• Check functionality on mobile — burger menu, hidden elements, responsiveness.