System Requirements Document for 7-8

1. Introduction

This document specifies the system requirements for 7-8, delivered as the project Ali Hilal | AI & Code — a professional Arabic-first landing page that establishes a personal digital identity specialized in artificial intelligence, programming, and future technologies.

The product intent is to present Ali Hilal as an ambitious technical learner through a single, elegant, integrated main interface that serves as the foundation for a digital identity that can grow and expand. The interface must read as a professional technology product surface — inspired by world-class technology companies — and explicitly not as a promotional poster.

The audience is Arabic-speaking visitors: developers, learners, and recruiters browsing on desktop and mobile, who arrive to understand Ali Hilal's identity in AI, programming, and future technologies, browse his topic sections and vision, and reach his social links.

2. System Overview

The current delivery is a single public landing page (the Landing surface) with no access restriction: any visitor can open it directly. It presents, top to bottom:

• A fixed top navigation bar carrying the wordmark «علي هلال | Ali Hilal» and section links.
• A Hero section with the name, the main headline «أتعلم اليوم، لأصنع تقنيات الغد.», the description paragraph, and two clear buttons: «استكشف مشاريعي» and «رحلتي في التعلم».
• Six consistent topic cards:\x20\xf0\x9f\xa4\x96 الذكاء الاصطناعي،\x20\xf0\x9f\x92\xbb البرمجة،\x20\xf0\x9f\x94\x90 الأمن السيبراني،\x20\xf0\x9f\xa7\xaa مشاريعي،\x20\xf0\x9f\x93\x9a مكتبة المعرفة،\x20\xf0\x9f\x9a\x80 التطور المستمر.
• A vision section titled «المعرفة بداية كل إنجاز» with its statement text.
• A featured-projects area showing three future project cards, each with an image or suitable icon, project name, short description, and a «اكتشف المشروع» button, with cards updatable in the future.
• A footer with the name, the tagline «الذكاء الاصطناعي • البرمجة • المستقبل», social links, and copyright «© 2026 Ali Hilal».

The accepted active human actors are the Visitor (زائر / قارئ الموقع) and the site owner, Ali Hilal (مالك الموقع / علي هلال — صاحب الهوية الرقمية). No other human roles are in scope.

Narrow exclusions and boundaries that bind this delivery:

• No personal photograph or avatar of Ali Hilal may be used anywhere; the hero visual is an abstract professional composition of a neural network, code lines, and electronic circuits.
• No invented achievements or completed projects may be presented; the featured-project cards stay in an honest in-development state until real content exists.
• No clutter, no cartoon drawings, and no exaggerated effects.
• The design must be implementable later in Google Sites without custom programming.
• The earlier 8080.ai platform material in the requirement thread is background context about an agentic software-building platform; it is not part of this product's scope and creates no pages, modules, or capabilities here.

2a. Product Interpretation and Delivery Boundary

The product is a first-party, publicly reachable landing page owned by the application. It requires no account, no sign-in, and no identity establishment: the accepted journeys are entirely read-and-navigate, and no durable actor-specific state, commitment, entitlement, or value transfer is created for any visitor. Access is therefore open (access_requirement: none), and no authentication, registration, or account-management capability is introduced.

The owner's role in the current delivery is authorship of the identity content and the requirement that the featured-project area remain updatable in the future. No owner-facing editing console, dashboard, or admin surface is accepted in the current scope; content updates are a future-horizon concern recorded in Section 11 and Section 3's future note, not a current page.

The delivery is a single cohesive destination because the whole accepted experience shares one working context (the identity presentation), one access boundary (public), one lifecycle (arrive → read → navigate → reach social links), and one completion outcome. Nothing in the accepted behavior justifies a second page.

2b. Source Content Inventory

Not applicable — no reference directive in this request declares content_source authority.

2c. Page Content and Component Coverage

Landing

Information and state

• Identity wordmark: «علي هلال | Ali Hilal».
• Hero headline: «أتعلم اليوم، لأصنع تقنيات الغد.».
• Hero description: «رحلتي في عالم الذكاء الاصطناعي والبرمجة والتقنيات المستقبلية، حيث تتحول المعرفة إلى أفكار، والأفكار إلى مشاريع.».
• Six topic cards, each with its emoji marker, Arabic title, and its exact descriptive line: -\x20\xf0\x9f\xa4\x96 الذكاء الاصطناعي — أدوات ذكية، تجارب عملية، تطبيقات الذكاء الاصطناعي، وهندسة الأوامر. -\x20\xf0\x9f\x92\xbb البرمجة — تعلم البرمجة، مشاريع تطبيقية، وأكواد وأفكار تقنية. -\x20\xf0\x9f\x94\x90 الأمن السيبراني — مفاهيم الأمن الرقمي، الشبكات، وحماية المعلومات بصورة تعليمية وأخلاقية. -\x20\xf0\x9f\xa7\xaa مشاريعي — عرض المشاريع الرقمية والتجارب والأدوات التي يعمل على تطويرها. -\x20\xf0\x9f\x93\x9a مكتبة المعرفة — مصادر تعليمية، ملخصات، كتب وأدلة مجانية من إعداده. -\x20\xf0\x9f\x9a\x80 التطور المستمر — مسار التعلم، المهارات المكتسبة، والأهداف المستقبلية.
• Vision section: title «المعرفة بداية كل إنجاز» and text «أؤمن بأن الذكاء الاصطناعي يفتح أبوابًا جديدة أمام المتعلمين والمبدعين، وأن البداية لا تتطلب معرفة كل شيء، بل تتطلب التعلم المستمر والتطبيق العملي.».
• Featured-projects area: three future project cards, each with an image or suitable icon, project name, short description, and a «اكتشف المشروع» button; the set is updatable in the future.
• Footer: «علي هلال | Ali Hilal», «الذكاء الاصطناعي • البرمجة • المستقبل», social links, and «© 2026 Ali Hilal».
• Global state: right-to-left Arabic alignment, correct and readable Arabic headings, a 16:9 horizontal reference frame, and a clear top-to-bottom organization.

Primary actions

• «استكشف مشاريعي» — moves the visitor to the featured-projects area.
• «رحلتي في التعلم» — moves the visitor to the learning-journey content (the topic cards and the التطور المستمر card).
• «اكتشف المشروع» on each featured-project card — the per-project discovery control.
• Social links in the footer — outbound navigation to Ali Hilal's social profiles.

Supporting actions

• Top navigation section links — jump to the corresponding section within the page.
• Topic cards — each card is a consistent, readable entry point into its topic's described content.

Domain entities

• Identity profile (name, headline, description, vision statement, tagline).
• Topic section (emoji marker, Arabic title, descriptive line).
• Featured project (image or icon, name, short description, discovery control, updatable status).
• Social link (label and destination).
• Copyright notice.

Component responsibilities

• Top navigation bar — holds the wordmark and section links; remains fixed while the visitor scrolls; carries the thin sky-blue scroll-progress hairline along its bottom edge that continues into the hero as the section divider.
• Hero section — presents the wordmark, headline, description, and the two buttons; hosts the abstract professional visual combining a neural network, code lines, and electronic circuits; contains no personal photograph.
• Topic card rail — renders the six cards consistently, each with its emoji marker, Arabic title, and descriptive line, with soft corners and consistent technical icons.
• Vision section — renders the title and statement text as a single oversized Arabic statement over a near-black band.
• Featured-projects area — renders three project cards, each with image or icon, name, short description, and «اكتشف المشروع»; the area is structured so cards can be updated in the future.
• Footer — renders the name, tagline, social links, and the copyright line.

States

• Loading — the hero visual and any generated glyph art may initialize progressively; text content (headline, description, cards, vision, footer) renders immediately and is never blocked by the visual.
• Empty — if a featured-project card has no real content yet, it presents its honest in-development state with its icon, name, short description, and «اكتشف المشروع» control; no fabricated achievement, completion, user count, or testimonial is shown.
• Success — all sections render in correct RTL order with readable Arabic headings, the two hero buttons and all card controls are visible and operable, and the footer social links are reachable.
• Error — if the hero visual cannot render, the hero falls back to a static abstract composition (neural network, code lines, electronic circuits) so the headline, description, and both buttons remain fully readable and operable.
• Recovery — a visitor can always continue by scrolling, using the top navigation links, or using the two hero buttons; no state is lost because the page holds no visitor-specific state.

3. Functional Requirements

FR-1 — Professional landing page as a personal digital identity (explicit) As a Visitor, I should open a professional landing page for Ali Hilal | AI & Code that builds a personal digital identity specialized in artificial intelligence, programming, and future technologies, so that I immediately understand who Ali Hilal is and what his identity covers.

• Trigger/input: the visitor opens the landing page.
• Observable result: the page presents the identity wordmark, headline, description, topic sections, vision, featured projects, and footer in a clear top-to-bottom organization.
• Access state: public, no sign-in.
• Failure/recovery: if any section fails to render, the remaining sections stay readable and the visitor can continue scrolling or use the navigation links.
• Continuation: the visitor browses the topic cards or uses the hero buttons.

FR-2 — Luxury, modern, organized, eye-comfortable technical visual identity (explicit) As a Visitor, I should see a visual identity that is luxurious, modern, organized, and comfortable to the eye, inspired by world-class technology company sites, so that the page reads as a serious professional technology surface.

• Trigger/input: the visitor views any part of the page.
• Observable result: primary colors are sky blue, dark blue, and white; supporting colors are a light technical violet and glowing sky touches; the background is white or a graded navy with fine technical elements; the Arabic font is Cairo or Tajawal; the style is Minimalist Tech + Futuristic UI.
• Access state: public.
• Failure/recovery: if a font fails to load, the page falls back to a readable Arabic sans-serif without breaking layout or RTL alignment.
• Continuation: the visitor continues reading and navigating.

FR-3 — Avoid clutter, cartoon drawings, and exaggerated effects (explicit) As a Visitor, I should experience a page free of clutter, cartoon drawings, and exaggerated effects, so that the interface stays calm, ordered, and professional.

• Trigger/input: the visitor views any part of the page.
• Observable result: no crowded layouts, no cartoon or mascot illustration, and no overdone effects are present.
• Access state: public.
• Failure/recovery: not applicable — this is a standing presentation constraint.
• Continuation: the visitor continues reading and navigating.

FR-4 — Hero section with name, headline, description, and two buttons (explicit) As a Visitor, I should see at the top of the interface the name «علي هلال | Ali Hilal», the main headline «أتعلم اليوم، لأصنع تقنيات الغد.», the description «رحلتي في عالم الذكاء الاصطناعي والبرمجة والتقنيات المستقبلية، حيث تتحول المعرفة إلى أفكار، والأفكار إلى مشاريع.», and two clear buttons — «استكشف مشاريعي» and «رحلتي في التعلم» — so that I can immediately orient myself and choose where to go.

• Trigger/input: the visitor opens the page.
• Observable result: the hero renders the name, the exact headline, the exact description, and both buttons, fully readable and operable.
• Access state: public.
• Failure/recovery: if the hero visual fails, the text and both buttons remain fully readable and operable over the static fallback.
• Continuation: the visitor activates «استكشف مشاريعي» or «رحلتي في التعلم».

FR-5 — Professional hero visual without a personal photo (explicit) As a Visitor, I should see a professional visual in the hero that combines an artificial-intelligence neural network, code lines, and electronic circuits, with no personal photograph used, so that the identity is expressed abstractly and honestly.

• Trigger/input: the visitor opens the page.
• Observable result: the hero visual contains neural-network, code-line, and electronic-circuit elements and contains no personal photograph or avatar.
• Access state: public.
• Failure/recovery: if the visual cannot render, a static abstract composition of the same elements is shown instead.
• Continuation: the visitor continues to the headline, description, and buttons.

FR-6 — Six consistent topic cards with exact content (explicit) As a Visitor, I should see consistent cards for the six sections —\x20\xf0\x9f\xa4\x96 الذكاء الاصطناعي (أدوات ذكية، تجارب عملية، تطبيقات الذكاء الاصطناعي، وهندسة الأوامر)،\x20\xf0\x9f\x92\xbb البرمجة (تعلم البرمجة، مشاريع تطبيقية، وأكواد وأفكار تقنية)،\x20\xf0\x9f\x94\x90 الأمن السيبراني (مفاهيم الأمن الرقمي، الشبكات، وحماية المعلومات بصورة تعليمية وأخلاقية)،\x20\xf0\x9f\xa7\xaa مشاريعي (عرض المشاريع الرقمية والتجارب والأدوات التي يعمل على تطويرها)،\x20\xf0\x9f\x93\x9a مكتبة المعرفة (مصادر تعليمية، ملخصات، كتب وأدلة مجانية من إعداده)،\x20\xf0\x9f\x9a\x80 التطور المستمر (مسار التعلم، المهارات المكتسبة، والأهداف المستقبلية) — so that I can see the full scope of the identity at a glance.

• Trigger/input: the visitor scrolls to the topic cards.
• Observable result: all six cards render with their emoji marker, Arabic title, and exact descriptive line, consistently styled with soft corners and consistent technical icons.
• Access state: public.
• Failure/recovery: if an icon fails to load, the card's emoji marker, title, and descriptive line remain fully readable.
• Continuation: the visitor reads the cards and continues to the vision section or uses the hero buttons.

FR-7 — Vision section with exact title and text (explicit) As a Visitor, I should see a vision section titled «المعرفة بداية كل إنجاز» with the text «أؤمن بأن الذكاء الاصطناعي يفتح أبوابًا جديدة أمام المتعلمين والمبدعين، وأن البداية لا تتطلب معرفة كل شيء، بل تتطلب التعلم المستمر والتطبيق العملي.», so that I understand the belief behind the identity.

• Trigger/input: the visitor scrolls to the vision section.
• Observable result: the exact title and exact text render as a single oversized Arabic statement, fully readable.
• Access state: public.
• Failure/recovery: not applicable — static text content.
• Continuation: the visitor continues to the featured-projects area.

FR-8 — Featured-projects area with three updatable cards (explicit) As a Visitor, I should see an area presenting three future projects, each with a card containing a suitable image or icon, the project name, a short description, and a «اكتشف المشروع» button, with the cards updatable in the future, so that I can preview what Ali Hilal is working toward.

• Trigger/input: the visitor scrolls to the featured-projects area.
• Observable result: three project cards render, each with image or icon, name, short description, and «اكتشف المشروع»; the card set is structured so it can be updated in the future.
• Access state: public.
• Failure/recovery: if a card has no real content yet, it presents an honest in-development state rather than a fabricated achievement.
• Continuation: the visitor activates «اكتشف المشروع» on a card or continues to the footer.

FR-9 — No invented achievements or completed projects (explicit) As a Visitor, I should never be shown invented achievements or completed projects that do not exist, so that everything I read on the page is honest.

• Trigger/input: the visitor views the featured-projects area and any other content.
• Observable result: no fabricated achievement, completed project, user count, or testimonial appears; project cards remain in an honest in-development state until real content exists.
• Access state: public.
• Failure/recovery: not applicable — this is a standing honesty constraint.
• Continuation: the visitor continues reading and navigating.

FR-10 — Footer with name, tagline, social links, and copyright (explicit) As a Visitor, I should see a footer containing «علي هلال | Ali Hilal», the tagline «الذكاء الاصطناعي • البرمجة • المستقبل», social links, and the copyright «© 2026 Ali Hilal», so that I can identify the owner and reach his social profiles.

• Trigger/input: the visitor scrolls to the footer.
• Observable result: the name, tagline, social links, and copyright line render fully readable, and the social links are operable.
• Access state: public.
• Failure/recovery: if a social link destination is unavailable, the remaining links and the footer text stay readable and operable.
• Continuation: the visitor opens a social link (leaving the page) or ends the visit.

FR-11 — Final design requirements: 16:9, RTL, readable Arabic, consistent icons, soft corners, Google Sites readiness, product-grade feel (explicit) As a Visitor, I should experience a horizontal 16:9-referenced design with clear top-to-bottom organization, correct right-to-left Arabic alignment, sound and readable Arabic headings, consistent technical icons, soft-cornered cards, a design implementable later in Google Sites without custom programming, and an overall feel of a professional technology product rather than a promotional poster.

• Trigger/input: the visitor views the page at any supported viewport.
• Observable result: the layout honors the 16:9 horizontal reference frame, all Arabic content is right-aligned with correct RTL punctuation, headings are readable, icons are consistent, cards have soft corners, and the page reads as a professional product surface.
• Access state: public.
• Failure/recovery: if the viewport is narrower than the reference frame, the layout reflows so that no readable headline, label, number, or control is cropped, clipped, or covered.
• Continuation: the visitor continues reading and navigating.

FR-12 — Required outcome: an integrated, elegant main interface as a growable identity foundation (explicit) As the site owner (Ali Hilal), I should receive an integrated and elegant main interface that reflects an ambitious technical learner and serves as the foundation for a digital identity that can grow and expand, so that the identity can be extended over time.

• Trigger/input: the owner reviews the delivered interface.
• Observable result: the interface is complete, elegant, and structured so that its content — including the featured-project cards — can be updated and expanded in the future.
• Access state: public page; the owner's review is of the delivered surface.
• Failure/recovery: not applicable.
• Continuation: future content updates extend the same interface.

FR-13 — Visitor reaches the owner's social profiles from the footer (explicit) As a Visitor, I should be able to reach Ali Hilal's social profiles from the footer links, so that I can follow or contact him.

• Trigger/input: the visitor activates a footer social link.
• Observable result: the visitor is taken to the corresponding social profile destination.
• Access state: public; the destination is externally owned.
• Failure/recovery: if a destination is unavailable, the visitor can return to the page and use another link.
• Continuation: the visitor returns to the page or ends the visit.

FR-14 — Owner's identity content is presented exactly as authored (required_inference) As the site owner (Ali Hilal), I should have my name, headline, description, vision statement, tagline, and copyright presented exactly as authored, so that the digital identity is accurate and not altered.

• Trigger/input: the owner supplies the identity content.
• Observable result: the page renders the exact authored strings for the wordmark, headline, description, vision title and text, tagline, and copyright.
• Access state: public page.
• Failure/recovery: not applicable — static authored content.
• Continuation: the owner can later update the featured-project cards as real content exists.

4. User Personas

زائر / قارئ الموقع (Visitor)

Product context. The Visitor arrives at the public landing page of Ali Hilal | AI & Code, typically from a shared link, a search, or a social profile. They browse on desktop or phone and read Arabic right-to-left. They have no account and no prior relationship with the page.

Primary goal. To quickly understand who Ali Hilal is as a technical learner in AI, programming, and future technologies, and to find the content they came for — his projects, his learning journey, or his social profiles.

Distinct accepted responsibilities.

• Reading the hero identity: the name, the headline «أتعلم اليوم، لأصنع تقنيات الغد.», and the description paragraph.
• Choosing a direction using the two hero buttons: «استكشف مشاريعني» to reach the featured projects, or «رحلتي في التعلم» to reach the learning-journey content.
• Browsing the six topic cards to see the full scope of the identity: الذكاء الاصطناعي، البرمجة، الأمن السيبراني، مشاريعي، مكتبة المعرفة، التطور المستمر.
• Reading the vision statement «المعرفة بداية كل إنجاز».
• Reviewing the three featured-project cards and activating «اكتشف المشروع» on a card of interest.
• Reaching Ali Hilal's social profiles through the footer links.

Relevant inputs or decisions. The Visitor's only decisions are which direction to take from the hero and which card or link to follow. They supply no data and make no commitment.

Interactions with other accepted participants. The Visitor is the sole active reader of the owner's authored identity content. The owner is the author whose content the Visitor reads; the Visitor's interaction with the owner is one-directional reading, plus the optional outbound step to the owner's social profiles.

Observable success. The Visitor has read the identity, understood the six topic areas and the vision, seen the three future projects, and either reached a social profile or ended the visit having found what they came for.

What makes this role's work different. The Visitor's work is entirely read-and-navigate: no state is created, nothing is owned, and nothing is resumed. Their success is comprehension and reachability, not task completion.

مالك الموقع / علي هلال (صاحب الهوية الرقمية)

Product context. Ali Hilal is the owner of the digital identity the page presents. He is an ambitious technical learner working across AI, programming, cybersecurity, and future technologies, and he needs a professional surface that represents him credibly to Arabic-speaking developers, learners, and recruiters.

Primary goal. To present himself as an ambitious technical learner through an integrated, elegant main interface that becomes the foundation of a digital identity that can grow and expand.

Distinct accepted responsibilities.

• Authoring the identity content: the name «علي هلال | Ali Hilal», the headline, the description, the vision title and text, the tagline, and the copyright line.
• Defining the six topic areas and their exact descriptive lines.
• Providing the three future project entries with their image or icon, name, and short description.
• Keeping the featured-project cards updatable so real content can replace the honest in-development state over time.
• Ensuring no invented achievements or completed projects are presented.

Relevant inputs or decisions. The owner decides the identity wording, the topic descriptions, and which future projects to show. The owner decides when real project content exists and replaces the in-development state.

Interactions with other accepted participants. The owner authors content that the Visitor reads. The owner does not interact with the Visitor directly on the page; the Visitor's optional outbound step to the owner's social profiles is the only continuation beyond the page.

Observable success. The delivered interface is integrated and elegant, reflects an ambitious technical learner, presents the authored content exactly, keeps the featured-project area honestly in-development and updatable, and stands as a foundation that can grow and expand.

What makes this role's work different. The owner's work is authorship and stewardship of an identity, not navigation. Their success is fidelity and future extensibility, not a completed in-page task.

5. Core User Flows

Flow 1 — Visitor reads the identity and chooses a direction from the hero

1. The Visitor opens the public landing page of Ali Hilal | AI & Code. No sign-in is required.
2. The Visitor sees the fixed top navigation bar with the wordmark «علي هلال | Ali Hilal» and the section links.
3. The Visitor reads the hero: the name «علي هلال | Ali Hilal», the headline «أتعلم اليوم، لأصنع تقنيات الغد.», and the description «رحلتي في عالم الذكاء الاصطناعي والبرمجة والتقنيات المستقبلية، حيث تتحول المعرفة إلى أفكار، والأفكار إلى مشاريع.».
4. The Visitor sees the professional hero visual combining a neural network, code lines, and electronic circuits — with no personal photograph.
5. The Visitor decides between the two clear buttons: «استكشف مشاريعي» or «رحلتي في التعلم».
6. The Visitor activates «استكشف مشاريعي» and is moved to the featured-projects area (Flow 4), or activates «رحلتي في التعلم» and is moved to the learning-journey content — the topic cards and the التطور المستمر card (Flow 2).
7. If the hero visual fails to render, the Visitor still reads the headline, description, and both buttons over the static abstract fallback and continues normally.

Flow 2 — Visitor browses the six topic cards

1. The Visitor scrolls from the hero to the topic cards, or arrives via «رحلتي في التعلم».
2. The Visitor sees six consistent cards, each with its emoji marker, Arabic title, and exact descriptive line:\x20\xf0\x9f\xa4\x96 الذكاء الاصطناعي،\x20\xf0\x9f\x92\xbb البرمجة،\x20\xf0\x9f\x94\x90 الأمن السيبراني،\x20\xf0\x9f\xa7\xaa مشاريعي،\x20\xf0\x9f\x93\x9a مكتبة المعرفة،\x20\xf0\x9f\x9a\x80 التطور المستمر.
3. The Visitor reads the descriptive lines to understand the scope of each area — for example, that الأمن السيبراني covers digital security concepts, networks, and information protection in an educational and ethical manner.
4. The Visitor continues to the vision section (Flow 3) or uses the top navigation links to jump to another section.
5. If an icon fails to load, the card's emoji marker, title, and descriptive line remain fully readable and the Visitor continues.

Flow 3 — Visitor reads the vision statement

1. The Visitor scrolls to the vision section.
2. The Visitor reads the title «المعرفة بداية كل إنجاز» and the text «أؤمن بأن الذكاء الاصطناعي يفتح أبوابًا جديدة أمام المتعلمين والمبدعين، وأن البداية لا تتطلب معرفة كل شيء، بل تتطلب التعلم المستمر والتطبيق العملي.».
3. The Visitor continues to the featured-projects area (Flow 4).

Flow 4 — Visitor reviews the featured projects and discovers one

1. The Visitor arrives at the featured-projects area from the hero button «استكشف مشاريعي», from scrolling, or from the top navigation links.
2. The Visitor sees three project cards, each with a suitable image or icon, the project name, a short description, and a «اكتشف المشروع» button.
3. The Visitor reads the cards and understands these are future projects; no completed achievement is claimed.
4. The Visitor activates «اكتشف المشروع» on a card of interest.
5. If a card has no real content yet, it presents its honest in-development state and the Visitor continues to another card or to the footer.
6. The Visitor continues to the footer (Flow 5).

Flow 5 — Visitor reaches the owner's social profiles from the footer

1. The Visitor scrolls to the footer.
2. The Visitor sees «علي هلال | Ali Hilal», the tagline «الذكاء الاصطناعي • البرمجة • المستقبل», the social links, and the copyright «© 2026 Ali Hilal».
3. The Visitor activates a social link and is taken to the corresponding external social profile.
4. If the destination is unavailable, the Visitor returns to the page and uses another link or ends the visit.

Flow 6 — Owner authors and stewards the identity content

1. The owner (Ali Hilal) supplies the identity content: the name, the headline «أتعلم اليوم، لأصنع تقنيات الغد.», the description, the vision title and text, the tagline, and the copyright line.
2. The owner defines the six topic areas with their exact descriptive lines.
3. The owner provides the three future project entries with their image or icon, name, and short description.
4. The page presents the authored content exactly as supplied, with the featured-project cards in an honest in-development state.
5. When real project content exists, the owner updates the featured-project cards, and the same interface presents the updated content without changing the page's structure.
6. The owner reviews the delivered interface and confirms it is integrated, elegant, and a foundation that can grow and expand.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Gleb Kuznetsov; the headline idea is a dark navy void where one luminous neural lattice is the hero — type and generative subject in tension, never stacked and centred.

Mode. Dark mode is the primary mode. A single light band is used only for the «المشاريع المميزة» section so the brand never shifts.

Exact colour tokens by role

Usage rules: #050B1A dominates roughly 70% of every screen; panels are layered translucency over it, never opaque grey cards. #38BDF8 is the primary signal — button fills, active HUD ticks, link states, and the neural lattice's core nodes. #A78BFA is the secondary glow used only on the lattice's outer filaments, one underline, and one number — never as a large fill. #EAF2FF is reserved for headline and body text; #8AA2C4 carries metadata, labels, and captions. Glow is always a soft radial bloom behind an element, never a gradient blob filling empty space. Body text #EAF2FF on #050B1A gives roughly 16:1 contrast; muted #8AA2C4 on #050B1A gives roughly 7:1 — readable at body size everywhere.

Font families

• Arabic display headings: Tajawal, weights 700–800, tight tracking (−0.01em), right-aligned.
• Latin headlines and numerals: Space Grotesk, weight 500, wide uppercase letterspacing (0.16em) as a small companion line; tabular figures used as ornament in stats and section indices.
• Arabic body and UI: Cairo.
• Code lines, data labels, micro-captions: IBM Plex Mono.

Type scale (1.333 modular, RTL-aware)

• Display: 40px mobile → 76px tablet → 104px desktop.
• H2: 30 / 40 / 52px.
• H3: 22 / 26 / 30px.
• Body: 17 / 17 / 18px with 1.85 Arabic line-height.
• Micro-label: 12px mono uppercase with 0.18em tracking.

Radius and shape language. Thin luminous strokes and continuous curves: 1px sky-blue hairlines, 2px arcs, ring and bezel motifs borrowed from instrument dials, and glass panels with 18–22px radii and 1px light borders. Corners are soft but never pill-soft; the only perfect circles are the HUD nodes and the agent-ring glyphs. Section boundaries are drawn as faint curved sweeps rather than straight rules.

Spacing rhythm. Full-bleed cinematic bands with generous negative space; an asymmetric 7/5 column grid (the right column wider in RTL reading order); the hero content block is capped to a 16:9 stage that scales intact from 375px to 1280px.

Imagery style. One crafted real-time subject: a volumetric neural lattice of thin luminous filaments with glowing nodes, woven through circuit-trace arcs and faint code-line strata, rendered in sky blue with violet outer filaments on the navy void. No personal photograph anywhere. Supporting imagery is diagrammatic and honest: schematic circuit glyphs for the six topic cards, thin-line agent-ring icons, and a faint topographic code grid as page texture. Project cards use abstract generated glyph art (node clusters, waveform rings, grid fragments) so no completed achievement is ever implied.

7. Signature Design Concept

The public entry is a full-viewport navy void, not a centred SaaS stack. The right 55% is a right-aligned RTL type block: the wordmark «علي هلال | Ali Hilal» in 12px mono uppercase sky-blue at the top, then the headline «أتعلم اليوم، لأصنع تقنيات الغد.» set in Tajawal 800 at 40px on mobile rising to 104px on desktop, occupying four to five lines and running flush to the right edge with deliberate negative space beneath it. Under the headline, the description paragraph sits in a 46ch measure at 17–18px in #8AA2C4, and beneath it the two buttons sit side by side — «استكشف مشاريعي» as a solid #38BDF8 fill with #050B1A text, «رحلتي في التعلم» as a 1px #38BDF8 outline on transparent — both full-width stacked at 375px.

The left 45% is the luminous neural lattice, bleeding off the left and bottom edges, with a faint HUD ring and three mono data labels floating at its edge in #8AA2C4 at 60% opacity. A thin sky-blue hairline runs the full width beneath the hero as the section transition. Nothing is centred, nothing is a gradient blob, and the headline is the largest object on the page.

The signature moves that carry the concept across the page:

• A hero where the headline spans the viewport width in RTL while a live volumetric neural lattice bleeds off the opposite edge — type and generative subject in tension, never stacked and centred.
• A fixed top nav whose bottom edge carries a 1px sky-blue scroll-progress hairline that extends into the hero as the section divider, so navigation and section transition are the same object.
• Six topic cards that are not identical tiles: each is a glass panel with an 18px radius, a right-side vertical index rule (٠١–٠\xd9\xa6 in Space Grotesk tabular figures), a thin-line circuit glyph, and a hover state that blooms a sky-blue glow behind the panel's edge instead of lifting the card.
• The vision section set as a single oversized Arabic statement — «المعرفة بداية كل إنجاز» at 52–104px — over a near-black band with a single violet filament arc crossing behind it, and the paragraph beneath in a 46ch measure; no card, no button, no decoration.

This concept only recomposes accepted content, states, and controls; it introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl

Landing Hero Motion Brief

• Focal subject. The volumetric neural lattice of thin luminous filaments with glowing nodes, woven through circuit-trace arcs and faint code-line strata, rendered in sky blue with violet outer filaments on the navy void — the abstract professional visual that replaces any personal photograph.
• Input → transformation → outcome thesis. As the visitor scrolls, the page scrubs a gentle camera push into the lattice's depth and fades the HUD overlay in; the lattice itself drifts in a slow continuous orbit with a light sweep passing across it roughly every 12 seconds. The outcome is that the identity's defining subject stays alive and dimensional while the headline, description, and both buttons remain the largest, fully readable objects on the page.
• Motion vocabulary. Slow continuous orbit; a light sweep across the lattice; scroll-scrubbed camera push; masked upward slide of section headings (24px over 600ms, soft ease-out); one-time count-up of data numbers when they enter view; hover that raises the glow behind a card's edge rather than lifting the card. Nothing bounces, nothing spins for its own sake.
• Composed first frame. The navy void fills the viewport. The right 55% holds the right-aligned RTL type block — wordmark, the four-to-five-line headline, the description in a 46ch measure, and the two buttons. The left 45% holds the lattice bleeding off the left and bottom edges, with the faint HUD ring and the three mono data labels at its edge. A thin sky-blue hairline runs the full width beneath the hero.
• Reduced-motion state. With prefers-reduced-motion, the lattice freezes to a single static frame, all reveals become instant, and the topic rail becomes a horizontally scrollable row so every card can be brought fully into view.

9. Non-Functional Requirements

NFR-1 — Arabic RTL correctness (explicit) The page must use correct right-to-left Arabic alignment, with sound and readable Arabic headings and correct RTL punctuation. Rationale: the audience is Arabic-speaking and the source explicitly requires correct RTL alignment and readable Arabic headings.

NFR-2 — 16:9 horizontal reference frame (explicit) The design must use a horizontal 16:9 ratio as the visual reference for the site interface, with clear top-to-bottom organization. Rationale: explicitly required as a final design requirement.

NFR-3 — Readability at every viewport (explicit, reinforced by the creative direction) Headlines, wordmarks, labels, numbers, cards' text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element may cover any part of them. Rationale: the source requires readable Arabic headings and a professional product-grade surface; the creative direction makes this a hard readability rule.

NFR-4 — Google Sites implementability (explicit) The design must be implementable later in Google Sites without custom programming. Rationale: explicitly required as a final design requirement. This constrains the design to structures and content that can be reproduced in Google Sites' page-building model.

NFR-5 — No personal photograph (explicit) No personal photograph or avatar of Ali Hilal may appear anywhere on the page. Rationale: explicitly required for the hero visual and reinforced by the creative direction's avoid list.

NFR-6 — Honest content (explicit) No invented achievements, completed projects, fabricated user counts, or testimonials may be presented; featured-project cards stay in an honest in-development state until real content exists. Rationale: explicitly required.

NFR-7 — No clutter, cartoon art, or exaggerated effects (explicit) The interface must avoid clutter, cartoon drawings, and exaggerated effects. Rationale: explicitly required as part of the visual identity.

NFR-8 — Accessible contrast and reduced-motion support (required_inference) Body text must meet accessible contrast on its ground (the specified #EAF2FF on #050B1A and #8AA2C4 on #050B1A both satisfy this), and a usable static arrangement must be provided under prefers-reduced-motion. Rationale: indispensable for the accepted requirement that the page be comfortable to the eye and readable at every viewport, and for the creative direction's reduced-motion state.

NFR-9 — Public, no-account access (required_inference) The landing page must be reachable without sign-in or account creation. Rationale: the accepted journeys are entirely read-and-navigate and create no durable actor-specific state, commitment, entitlement, or value transfer; no identity continuity is required.

10. Tech Stack

No technology choices were specified by the user for this project. The following are coherent defaults, labeled as such:

• Frontend: React with a component-based structure for the Landing surface, styled for RTL Arabic layout. [Default — not specified by user]
• Hero visual: a real-time WebGL/R3F hero subject, as required by the creative direction's webgl hero dimensionality. [Default — not specified by user]
• Fonts: Tajawal, Cairo, Space Grotesk, and IBM Plex Mono loaded as web fonts with Arabic sans-serif fallbacks. [Default — not specified by user]
• Backend: none required for the current delivery — the page is a static, publicly reachable identity surface with no server-side behavior, no persistence, and no authentication. [Default — not specified by user]
• Deployment: static hosting sufficient for a single public page; Docker/docker-compose or Kubernetes are not required by any accepted requirement. [Default — not specified by user]

11. Assumptions and Constraints

Assumptions

• The page is publicly reachable with no sign-in, because every accepted journey is read-and-navigate and no durable actor-specific state is created. (required_inference)
• The three featured-project cards may initially present an honest in-development state, since the source forbids inventing completed projects and requires the cards to be updatable in the future. (explicit)
• Social link destinations are externally owned profiles; the page only links out to them. (required_inference)
• The owner's content updates to the featured-project cards are a future-horizon activity performed outside the current page; no owner-facing editing surface is in current scope. (required_inference)

Constraints

• No personal photograph or avatar of Ali Hilal anywhere on the page. (explicit)
• No invented achievements or completed projects. (explicit)
• No clutter, cartoon drawings, or exaggerated effects. (explicit)
• Horizontal 16:9 design as the visual reference. (explicit)
• Correct right-to-left Arabic alignment and sound, readable Arabic headings. (explicit)
• Implementable later in Google Sites without custom programming. (explicit)
• The result must read as a professional technology product interface, not a promotional poster. (explicit)
• The generic indigo/blue-on-white SaaS template look is forbidden for this project. (creative direction)

Future horizon (not current scope)

• Updating the featured-project cards with real project content once it exists. (explicit)
• Growing and expanding the digital identity beyond the current single landing page. (explicit)

12. Glossary

• Ali Hilal | AI & Code — the project name of the personal digital identity landing page.
• 7-8 — the project identifier used for this generation.
• Hero Section — the top section of the interface containing the name, main headline, description, and the two buttons.
• RTL — right-to-left text direction, required for correct Arabic alignment.
• 16:9 — the horizontal aspect ratio used as the visual reference for the interface.
• Featured projects — the area presenting three future project cards, each with an image or icon, name, short description, and a «اكتشف المشروع» button.
• Topic cards — the six consistent cards for الذكاء الاصطناعي، البرمجة، الأمن السيبراني، مشاريعي، مكتبة المعرفة، والتطور المستمر.
• Vision section — the section titled «المعرفة بداية كل إنجاز» with its statement text.
• Google Sites — the platform in which the design must be implementable later without custom programming.
• In-development state — the honest state of a featured-project card that has no real content yet, used instead of inventing a completed achievement.