Development of design and layout of a website for adults

It is necessary to develop a design and perform responsive front-end layout for an adult-themed website. The site is a catalog of stream recordings. Key requirements - high loading speed, clean code, modern minimalist appearance, and the ability to easily change the color scheme. That is, it is required to

1.  **UI/UX Design:** Create layouts for all pages of the site in **Figma**. This stage must be completed and **fully approved** before starting the layout.

2.  **Front-end layout:** Convert the approved layouts into a working HTML/CSS/JS site.

**Domain:** `lexotex.com`

**Design Requirements (UI/UX)**

* **Overall Style:** Modern, minimalist design in **dark tones**. The style should be simple, intuitive, and functional, without unnecessary visual elements. The main focus is on content (video previews).

* **Color Scheme:** The performer must propose a main dark palette. **Critically important:** the entire color scheme must be implemented through **CSS variables (custom properties)**. In the stylesheet, there should be a separate block (for example, `:root`) where 5-7 main color variables are collected (main background, text color, accent color for links and buttons, etc.). Changing the values of these variables must completely and correctly change the appearance of the entire site.

* **Fonts:** Use standard system fonts (e.g., Arial, Helvetica, San Francisco, Roboto) for maximum loading speed and compatibility. **No use of third-party web fonts.**

* **Logo:** A logo as such is not needed. Instead, use the text name of the site `lexotex.com`, stylized in the chosen font.

* **Reference:** **Pornhub** (as an example for structure, functionality, and overall layout of elements, not for direct copying of design).

**Site Structure and Pages**

1.  **Homepage:**

    * Site header (text logo, category menu, search bar).

    * Block "Popular Videos".

    * Block "New Videos".

    * Main grid with video previews (image + title).

    * Pagination (classic, with page numbers: 1, 2, 3...).

    * Footer (links to text pages).

2.  **Video Viewing Page:**

    * Embedded frame with video (iframe).

    * Video title.

    * List of tags/categories to which the video belongs.

    * Block "Similar Videos" (design and layout).

3.  **Category Page:**

    * Similar to the homepage, but displays videos only from the selected category, has the category name and its own pagination.

4.  **Text Pages (2 pcs.):**

    * Terms of Service.

    * DMCA.

    * Pages must be laid out, content to be used in the form of placeholder text ("lorem ipsum").

5.  **Feedback Page:**

    * Form with fields (Name, Email, Subject, Message Text) and a "Send" button.

    * Data from the form must be sent to the specified email.

    * The form must be protected from spam using **Google reCAPTCHA v2**.

**Technical Requirements for Layout**

* **Validity:** 100% valid HTML code, checked at `validator.w3.org` without errors.

* **Speed:** **Google PageSpeed Insights 95+** for mobile and desktop versions. Mandatory image optimization. Minification of CSS/JS is not needed, as the CMS will handle it.

* **Responsiveness:** Single HTML for all devices (Mobile-first approach). The layout must display correctly on all popular screen resolutions.

* **Cross-browser Compatibility:** Correct display in the latest versions of Chrome, Firefox, Safari, Edge browsers. Support for Internet Explorer is not required.

* **Semantic Layout:** Use of appropriate tags (header, footer, nav, article, section) to improve SEO.

* **Favicon:** Connection of favicon icons for different devices.

* **Easy Theme Change:** This point duplicates the requirement from the design section for emphasis: **all CSS must be based on variables** for quick rebranding of the site.

**Technology Stack**

* **HTML5**

* **CSS3** (preferably without using the preprocessor **SCSS**, as I am not familiar with it).

* Native **JavaScript (ES6+)**.

* **No use of jQuery, Bootstrap, Tailwind** or other large JS/CSS frameworks.

**Work Result**

1.  Link to the final, approved project in Figma (or some equivalent).

2.  Archive with all layout files (HTML, CSS, JS, optimized images, fonts) and a brief instruction on the file structure.

I look forward to your proposals with cost estimates and project completion timelines. Please include a link to your portfolio with similar works in your application.