-------------------------------------------------------------------------------- DOCUMENT CONTROL (HEADER) -------------------------------------------------------------------------------- Document ID : DARX_TECH_MAP_001 Title : Homepage Structure Map Module and Layer Hierarchy Version : 1.0 Status : Active Classification : Internal — Reference Date Created : 2026-05-23 Department : TECH Style : BPGP Owner : PYB / Daralbeida Group : DARALBEIDA — TECHNOLOGY / WEB PLATFORM -------------------------------------------------------------------------------- OUTLINE -------------------------------------------------------------------------------- 1. Purpose and Scope 2. Node Type Tags 3. Page Container 4. Module Sequence 5. Module Layer Specifications 6. Design Tokens 7. Dynamic Components 8. Acronyms 9. Glossary 10. Document Control ================================================================================ 1. PURPOSE AND SCOPE ================================================================================ This document maps the structure of the Daralbeida homepage as a layered component hierarchy. It is the controlling reference for the order, nesting, and composition of every visible module on the page. It governs structure only. Pixel dimensions, exact copy, animation timing, and styling values beyond the design tokens in Section 6 are defined in the homepage specification and the element CSS files. Hierarchy depth in Section 5 is shown by dotted decimal numbering. A deeper number indicates a deeper layer. Each layer line carries a node-type tag in brackets. ================================================================================ 2. NODE TYPE TAGS ================================================================================ The following tags classify each layer. PAGE Top-level page container FRAME A module or sub-container, usually with auto layout GROUP A grouping of related layers COMP A repeated component instance TEXT A text layer SHAPE A rectangle, vector, rule, or decorative element CTRL An interactive control such as an arrow, dot, or toggle Auto layout direction is noted AL-V for vertical or AL-H for horizontal. ================================================================================ 3. PAGE CONTAINER ================================================================================ The page is a single vertical stack. 1 [PAGE] Homepage 1.1 [FRAME] Homepage Root, AL-V, fill Ivory All ten modules in Section 4 are direct children of Homepage Root, stacked top to bottom in the order listed. ================================================================================ 4. MODULE SEQUENCE ================================================================================ The homepage renders these modules in this order. The source element file for each module is given for traceability. 1. Site Header element_webpage_home_header.php 2. Hero element_webpage_home_hero.php 3. Triptych Band element_webpage_home_cards.php 4. Key Cards Carousel element_webpage_home_carousel_key_cards.php 5. Manifesto element_webpage_home_cards.php 6. Pillar Cards element_webpage_home_cards.php 7. Signup element_webpage_home_cards.php 8. Chef Carousel element_webpage_home_cards.php 9. People Who Chose Morocco element_webpage_home_cards.php 10. Footer element_webpage_home_footer.php Modules 3 and 5 through 9 are emitted by one element file. Module 4 is included from within that file after the Triptych Band. ================================================================================ 5. MODULE LAYER SPECIFICATIONS ================================================================================ Each sub-section gives one module's layer hierarchy. Dotted decimal numbering shows depth. -------------------------------------------------------------------------------- 5.1 Site Header -------------------------------------------------------------------------------- 1 [FRAME] Site Header, AL-H, space-between, sticky 1.1 [GROUP] Brand 1.1.1 [TEXT] Wordmark daralbeida (TM), Cormorant, Atlas Gold 1.1.2 [TEXT] Sub-brand Purveyors of Moroccan Flavors, DM Mono 1.2 [COMP] Language Switcher 1.2.1 [CTRL] Trigger, flag and caret 1.2.2 [GROUP] Dropdown overlay, hidden until open -------------------------------------------------------------------------------- 5.2 Hero -------------------------------------------------------------------------------- 1 [FRAME] Hero, full-bleed, relative 1.1 [SHAPE] Grain overlay 1.2 [SHAPE] Botanical mark, vector 1.3 [SHAPE] Hairline rule 1.4 [GROUP] Overlay, centered, cycling engine, nine steps 1.4.1 [GROUP] Indicator row, AL-H 1.4.2 [TEXT] Main word, cycling 1.4.3 [TEXT] Verb, cycling 1.4.4 [TEXT] Sub-tagline, cycling 1.4.5 [TEXT] Permanent tagline -------------------------------------------------------------------------------- 5.3 Triptych Band -------------------------------------------------------------------------------- 1 [FRAME] Triptych Band, AL-H, three panels, dark 1.1 [COMP] Triptych Panel, repeated three times 1.1.1 [TEXT] Panel number and body -------------------------------------------------------------------------------- 5.4 Key Cards Carousel -------------------------------------------------------------------------------- 1 [FRAME] Key Cards Section, full-width gradient 1.1 [FRAME] Inner, fixed width, centered 1.1.1 [GROUP] Label row, word and separator 1.1.2 [FRAME] Slider, clips overflow 1.1.3 [FRAME] Track, AL-H, clone-wrapped loop 1.1.4 [COMP] Key Card, three: Origin, Integrity, Refinement 1.1.5 [CTRL] Previous and Next arrows 1.1.6 [GROUP] Dots, three 1.1.7 [SHAPE] Progress bar -------------------------------------------------------------------------------- 5.5 Manifesto -------------------------------------------------------------------------------- 1 [FRAME] Manifesto, AL-V, centered 1.1 [TEXT] Opener line 1.2 [TEXT] Bridge line -------------------------------------------------------------------------------- 5.6 Pillar Cards -------------------------------------------------------------------------------- 1 [FRAME] Pillar Cards, AL-H, three cards 1.1 [COMP] Card, repeated three times 1.1.1 [SHAPE] Illustration 1.1.2 [TEXT] Number, category, attribute -------------------------------------------------------------------------------- 5.7 Signup -------------------------------------------------------------------------------- 1 [FRAME] Signup, AL-V, centered 1.1 [SHAPE] Micro rule 1.2 [TEXT] Statement -------------------------------------------------------------------------------- 5.8 Chef Carousel -------------------------------------------------------------------------------- 1 [FRAME] Chef Section, relative 1.1 [TEXT] Section label 1.2 [FRAME] Slider and Track, AL-H 1.2.1 [COMP] Chef Column, repeated: stars, name, fact, context 1.3 [CTRL] Previous and Next arrows 1.4 [GROUP] Dots, repeated -------------------------------------------------------------------------------- 5.9 People Who Chose Morocco -------------------------------------------------------------------------------- 1 [FRAME] Celebrity Section 1.1 [TEXT] Section label 1.2 [FRAME] Grid, AL-H, wraps 1.2.1 [COMP] Celebrity Column: mark, name, role, quote 1.2.2 [GROUP] Choice attribution -------------------------------------------------------------------------------- 5.10 Footer -------------------------------------------------------------------------------- 1 [FRAME] Footer, AL-V, dark 1.1 [TEXT] Footer tagline ================================================================================ 6. DESIGN TOKENS ================================================================================ Color tokens. Token Hex ------------ ------ Deep Blue 1A4D6D Ivory F6F1E7 Atlas Gold B8832A Ocean Blue 4A7C9E Sand EDE3CE Terracotta C4856A Olive 6B7F4A Charcoal 28333A Typeface roles. Role Family -------------- ------------------ Display Cormorant Garamond Body Montserrat Labels, data DM Mono Arabic script Amiri Entity accent overrides: DARH uses Deep Blue, DARX uses Atlas Gold, DARM uses Terracotta. ================================================================================ 7. DYNAMIC COMPONENTS ================================================================================ Three components are script-driven and change state at runtime. In a design tool each is built as a component with one variant per state. The hero overlay cycles nine steps; each step sets the indicator, the main word, the verb, and the sub-tagline. The permanent tagline does not change. The key cards carousel uses three real cards in a clone-wrapped track for a seamless loop and auto-advances with a progress bar. The chef carousel scrolls a variable, data-driven set of chef columns. ================================================================================ 8. ACRONYMS ================================================================================ AL Auto Layout COMP Component instance CSS Cascading Style Sheets HP Homepage JS JavaScript SVG Scalable Vector Graphics TM Trademark UI User Interface ================================================================================ 9. GLOSSARY ================================================================================ Auto Layout A layout mode arranging child layers automatically along one axis, vertical or horizontal, with consistent spacing. Clone-Wrap A carousel technique placing copies of the first and last items at opposite ends of the track so the loop appears continuous. The clones are generated at runtime and are not authored layers. Component A reusable layer group instantiated one or more times. A change to the definition propagates to every instance. Frame A container layer that holds other layers and defines layout. Module A self-contained horizontal band of the homepage, stacked vertically with the others to form the full page. Scrim A semi-transparent dark layer placed over an image to raise the contrast of text rendered on top of it. Triptych A three-panel composition presented as one horizontal band. Variant One named state of a component. ================================================================================ 10. DOCUMENT CONTROL ================================================================================ Document ID: DARX-TECH-MAP-001 Title: Homepage Structure Map Version: 1.0 Status: Active Date Created: 2026-05-23 Prepared by: PYB / Daralbeida Style: BPGP Department: TECH Classification: Internal — Reference Related Docs: DAB-WEB-HP-SPEC-001 Last Modified: 2026-05-23 Review Cycle: On any change to module order or element files Retention: Duration of the daralbeida.com homepage Owner: PYB / Daralbeida Distribution: Internal COMPLIANCE: Structure only. Confirm copy, pricing, origin claims, and personnel references against the controlling source documents before acting on placeholder content here. -------------------------------------------------------------------------------- END OF DOCUMENT — DARX-TECH-MAP-001 --------------------------------------------------------------------------------