Mobile Landing

Shared characteristics of the mobile screens

• Canvas size: 1080×2340px (portrait mobile).
• Navigation: a vertical right-hand rail with planet dots and scroll indicators, instead of a horizontal header.
• Transition effects: Upper transition and Down transition overlays (fade gradients) at the top and bottom of every screen.
• Between sections: vertical scrolling plus the right navigation rail.
• Fonts: the same — Alexandria (Medium/Regular/Light) and Space Grotesk (Bold/Regular/Light).
• Colour tokens: the same as on desktop.

8.1 First Screen (1486:3054)

Background: the gradient #122942 → #2f5e99, starry space (blur 3px, luminosity), and a 3D Earth with a glow.

Top header (sticky)

• Banner: World Premiere 2026 · Join the Beta Now (limited spots) (Lemon Chiffon, a glass pill).
• The AMADEQ logo (full width).
• Subheading: Your Personal AI Tutor That Feels Real (Lemon Chiffon, 32px).
• Description: "Speaks naturally, adapts to you in minutes…" (gradient white → 66 %, 24px).
• Buttons on the right: Sign Up (light border) and Sign In (gold border, gold text).
• A planet icon for language selection.

Bottom section (pinned)

• Counter: Until Launch plus 60 days : 12 hours : 24 min (Lemon Chiffon).
• Try the Live Demo button (glass pill, light border, #e7f0fa text, 112px high).
• Reserve Spot in Closed Beta button (gold border #e6b84c, gold text, full width, 112px).
• Social proof: "8,247 people already in line · First wave: 1,000 spots" (Lemon Chiffon, 36px).

Technical requirements

• The countdown to the launch date runs in real time through setInterval.
• Reserve Spot leads to the registration form or /auth/signup.
• Try the Live Demo leads to /demo.

8.2 Interactive Demonstration (4288:1421)

Background: the gradient #305f9a → #7ca4cf.

Top tab switcher: Info (50 % opacity) | Agent Demo (active, 64px) | Chat (50 % opacity).

Content — the "About the Project" section

• Heading: About the Project (Lemon Chiffon, 48px).
• Description: "AMADEQ is a real-time learning platform powered by AI avatars…" (32px).
• The 3D avatar frame (full width, h-[1280px], rounded-[36px], blur overlay, border #6192c7):
  • Effects: foreground-blur 24px, inner-shadow rgba(0,0,0,0.4), drop-shadow rgba(E7F0FA,0.1) 0 0 124px 64px.
  • CTA over the avatar: START DEMO (gold border #e6b84c, gold text, rounded-[65px], 112px high).
• A ← Learn More button (light, rounded-[75px]).

Technical requirements

• The "Agent Demo" tab renders the 3D avatar (Unreal Engine or a Spline embed).
• The "Info" tab shows textual product information.
• The "Chat" tab is the AI chat.
• START DEMO initiates a WebRTC/WebSocket session with the AI avatar.

8.3 MVP Demo (4288:1800)

Background: the gradient #7ba3cf → #e7eff9 (light).

Top tab switcher: Marketplace (50 %) | Demo (active) | All Services (50 %).

Heading: AMADEQ demonstration (64px).

Main card (video player)

• Size: full width, h-[1768px], rounded-[36px].
• Gradient: #2e5e99 → through rgba(187,208,231,0.5) → #e6b84c (blue to gold).
• The AMADEQ logo (128px high).
• A play button (256px, 3D effect).
• Caption: Product Demo (Lemon Chiffon, Bold, 48px).
• A progress bar at the bottom (play icon plus track).

Technical requirements

• A video player (YouTube embed or an in-house HTML5 video).
• Autoplay off; muted until the first click.

8.4 Road Map (4290:2368)

Background: the gradient #e7eff9 → #7ca3cf — inverted, lighter at the top.

Top tab switcher: Questions (50 %) | Roadmap (active) | Uniqueness (50 %).

Heading: Amadeq planning (64px).

Milestone card (glass morphism)

• rounded-[36px], shadow-[128px_64px_128px_rgba(0,0,0,0.08)].
• Heading: 2 Milestone (Lemon Chiffon, 64px).
• Three subsections, each with the label Agents: (Lemon Chiffon, 48px) plus a description (36px, Prussian Blue gradient).

Bottom navigation between milestones

• A dashed orbit with planet dots 1, 2, 3 (96px numerals, Lemon Chiffon).
• The active milestone has a larger dot.

Technical requirements

• Swipe or click a dot to switch between milestone cards.
• A transition animation (slide or fade).

8.5 Pricing (4292:2)

Background: the gradient #7ca3cf → #2f5f98.

Heading: Pricing / Select your plan (64px).

Plan card (glass, h-[1452px], rounded-[36px])

• Gradient: rgba(187,208,231,0.5) → rgba(97,146,199,0.25) → rgba(97,146,199,0.5).
• Name: Visitor (Alexandria Light, 96px) plus (Free Demo) (36px).
• Price: Price: $0 (64px, Prussian Blue gradient).
• Feature list (Space Grotesk Regular, 48px): Limited demo access · Text or voice interaction · Agent switching · Daily interaction limits.
• Description: "Best for first-time users who want to feel how AMADEQ works." (64px).
• CTA: Select Plan (semi-transparent, large text).

Bottom navigation between plans

• Planet dots: 1 (active), 2.
• Text: swipe or click to see more.

Technical requirements

• Horizontal swipe between plans (Visitor plus at least one paid plan).
• Select Plan leads to /auth/signup or the subscription form.

8.6 Collaboration & Partners (4292:654)

Background: the gradient #2e5f98 → #0d2440 plus the mountain background (blur 3px, overlay, 15 % opacity).

Heading: Collaboration & Partners (64px).

"Contacts & Partnerships" section

• Text: "We're open to collaboration with educational institutions, businesses, media, and technology partners…".
• Subheading: Press & Partnership Inquiries.
• Email: partnerships@amadeq.com (Bold) plus an explanation (Light).
• A Request button (glass pill, #e7f0fa).

"Partners & Media" section

Three icon subgroups (128px planet style, four icons per row): EdTech Media · Partners · Foundations.

"Press" section (horizontal carousel)

« / » arrows plus a large planet icon (164px) and a quote.

Technical requirements

• partnerships@amadeq.com is a mailto: link.
• Request opens the collaboration request form.
• The press carousel supports swiping between press items.

8.7 Download Application — final screen / footer (4293:22)

Background: #0d2440 (dark, Prussian Blue) plus a mountain overlay at 15 %.

Heading: Download the Application (64px).

Download buttons

• Get it on Google Play (a 128px Google Play icon plus 48px text, rounded-[58px]).
• Download on the App Store (a 128px App Store icon plus 48px text, rounded-[51px]).

Cache management block (36px text)

• The app stores temporary data (assets, scenes, cached content).
• You can manually clear the cache at any time.
• You can control storage usage.
• Automatic cache optimization.

Social media

• Heading: Find us on social media.
• A carousel with arrows: YouTube, Telegram, Instagram, LinkedIn, Facebook (128px icons).

Footer: Terms of Service · Privacy Policy · GDPR Compliance · © 2026 AMADEQ. All rights reserved.

Technical requirements

• Google Play and App Store are external links, opened in a new tab.
• Social media is a swipeable carousel.
• Footer links go to /legal/terms, /legal/privacy, /legal/gdpr.

8.8 Mobile navigation overlay (4071:1130)

Purpose: a full-screen menu overlay for navigating the mobile landing sections.

Size: 1080×2340px. Background: backdrop-blur-[16px] plus bg-[rgba(0,0,0,0.25)] — a translucent blurred backdrop. Close: a × icon in the top-right corner, size-[56.455px].

Navigation items (right-hand side, listed top to bottom):

Item	Planet size	Text size	State
Application	164px	40px	Inactive
Collaboration	164px	40px	Inactive
Pricing	164px	40px	Inactive
Roadmap	164px	40px	Inactive
Demonstration	164px	40px	Inactive
Interactive	164px	40px	Inactive
Main page	256px	64px	Active

Each item is a planet Union icon plus a label. The active item has a larger planet (256px), 64px text, and a glass card rounded-[44px] with an rgba backing.

Technical requirements

• Opens on tapping the ☰ icon in the header.
• Clicking an item smooth-scrolls to the matching section and closes the overlay.
• position: fixed, z-index: 9999, with an entrance animation through Framer Motion (opacity 0→1, x: 100→0).

8.9 Road Map — "Uniqueness" tab (4290:2480)

Purpose: the third tab of the Road Map section — how AMADEQ differs from the alternatives.

Tab switcher: Questions (50 %) | Roadmap (50 %) | Uniqueness (active, 64px).

Heading: "Not just another Chatbot" — Alexandria, large, Alice Blue.

Card grid: two columns, with gap, rounded-[20px], shadow-[16px_16px_24px_rgba(0,0,0,0.16)], and a glass background.

#	Feature
1	Voice Interaction 24/7
2	Personality Simulation
3	Works Even without Internet
4	Long-Term Memory Engine
5	Preparation for Any Goal
6	Gamified Learning
7	Diagnostic Assessment
8	Exam-Level Explanations

Each card carries an icon, a title, and a short description.

Technical requirements

• Displayed when the "Uniqueness" tab is activated.
• Cards appear with a staggered Framer Motion animation.
• The cards are static and not interactive.

8.10 Interactive Demonstration — "All Services" tab (4288:2114)

Purpose: the third tab of the Demonstration section — an overview of every platform service.

Tab switcher: Marketplace (50 %) | Demo (50 %) | All service (active).

Heading: "AMADEQ demonstration" — Alexandria, Alice Blue.

Four vertical service blocks (rounded-[20px], glass morphism):

#	Service	Content
1	Personal AI Agent & Assistant	A bullet list of capabilities plus a 164px planet
2	Avatar Marketplace	A bullet list plus a 164px planet
3	Client & Team Learning / Upskilling	A bullet list plus a 164px planet
4	Remote Video Rendering with Avatars	A bullet list plus a 164px planet

Block structure: a 3D planet icon (164px) on the left, the title plus a bulleted list on the right.

Technical requirements

• Displayed when the "All service" tab is activated.
• Vertical scrolling inside the section when the content overflows.
• The planets are SVG or Lottie components.

8.11 Interactive Demonstration — "Chat" tab (4288:1659)

Purpose: the second tab of the Demonstration section — a live chat with the AI avatar Adam.

Tab switcher: Info (48px) | Avatar Demo (50 %) | Chat (64px, active).

Agent selector

[?]  ←  Adam  →  [?]

• ← / → arrows switch between agents.
• The active agent: "Adam", Alexandria Bold, 64px.
• The question marks on either side are placeholders for future agents.

3D avatar frame

• Height 1280px, rounded-[36px].
• Border: #6192c7.
• drop-shadow: rgba(E7F0FA, 0.1).
• Displays the video or WebGL render of Adam.

Chat transcript (Space Grotesk Bold, 32px)

Who	Message
You	"Can you really adapt to me?"
Adam	"Yes. I learn how you think… I'm not a course — I'm a conversation."
You	"Nice"

Input field

• Placeholder: "Write your text...".
• Background #e7f0fa (Alice Blue), rounded-[60px].
• A 96px microphone icon on the right.

Technical requirements

• Connects to a WebSocket / the Vercel AI SDK for real-time chat.
• The avatar is an iframe or WebGL component (Unreal Engine / Spline).
• Voice input through the Web Speech API (SpeechRecognition).
• Switching agents changes agentId in state and reloads the avatar.
• Messages are stored in sessionStorage — a temporary session without auth.

8.12 Mobile Agent Marketplace — listing (4288:269)

Purpose: the marketplace's main screen on mobile — the agent list with search and filtering.

Top tab switcher: Marketplace (active, 64px) | Demo (50 %) | All Services (50 %).

Subheading: "Agent Marketplace" — Alexandria Regular, gradient text.

Category filter (a horizontal strip of 96×96px icons)

Category	State
Dev	Active (highlighted, blue gradient)
Math	Active
Economy	Inactive
Biology	Inactive
Physics	Semi-transparent (75 %)
Sports	Semi-transparent (50 %)

Each icon: rounded-[24px], shadow-[0px_8px_12px], a 52×52px image plus a 24px label.

Search and sorting

• Search field: rounded-[61px], bg-[#e7f0fa], placeholder "Search agents...", shadow-[inset].
• Sort button: rounded-[39px], glass, an icon plus the text "Sort".

Agent grid: two columns, gap-[24px], rounded-[20px], shadow-[16px_16px_24px_rgba(0,0,0,0.16)].

Card structure:

• The avatar (agent photo, rounded-[8px], bg-[#0D2440], shadow-[inset]).
• Rating: 4.2/5 plus a star, Jasmine #F2D27A.
• Tags: Programming, Math, ... — rounded-[24px], glass.
• Description (Space Grotesk Regular, 24px, truncated with ...).
• Agent name: Lemon Chiffon #FFF2C2, Space Grotesk Bold, 48px.
• Price: "Price: $32" — a gold gradient pill.

Technical requirements

• Infinite scroll or pagination.
• Category filtering: GET /api/agents?category=dev&page=1.
• Search with a 300 ms debounce.
• Clicking a card opens the agent detail (§8.13).

8.13 Agent Detail — "Agent Demo" tab (3548:1256)

Purpose: agent detail — watching the live demo before buying.

Tab switcher (inside the card): Agent Demo (active) | Information (50 %) | Comments (50 %).

Agent: "Adam" — Space Grotesk Bold, 64px, Lemon Chiffon. Rating 4.2/5.

Avatar frame

• Size 952×1280px, rounded-[12px], bg-[#0D2440], shadow-[inset_12px_24px_12px].
• The agent photo (bottom aligned).
• CTA on top: START DEMO — Alexandria Medium, 64px, #E6B84C, border-[#e6b84c], rounded-[145px], with a gold gradient background.

Bottom buttons

• Get Agent — gold border #E6B84C, rounded-[59px], 64px.
• $32 — a gold glass pill, rounded-[71px].
• Close — ghost, rounded-[75px], white text.

Technical requirements

• "START DEMO" opens demo mode (the avatar's WebGL/iframe).
• "Get Agent" starts the agent purchase flow.
• Swiping moves between the tabs (Agent Demo / Information / Comments).

8.14 Agent Detail — "Information" tab (4288:688)

Purpose: the agent's details and description.

Tab switcher: Agent Demo (50 %) | Information (active) | Comments (50 %).

Content

• Name plus rating, as in §8.13.
• Specialization Tags (32px heading at 50 % opacity): the tags Programming and Math as glass pills.
• Description (32px heading at 50 % opacity), 48px text: "A confident and reliable AI mentor specializing in programming and mathematics, designed to guide users through complex topics with clarity and structure. It adapts to each user's skill level, learning pace, and goals…"

Bottom buttons: Get Agent + $32 + Close, as in §8.13.

8.15 Agent Detail — "Comments" tab (4288:809)

Purpose: user reviews of the agent.

Tab switcher: Agent Demo (50 %) | Information (50 %) | Comments (active).

Comment list — five entries, fading progressively from 100 % to 60 % opacity:

#	Date	Text	Opacity
1	02.05.26	"Good structure and pacing. The agent adapts well and doesn't overload with information."	100 %
2	02.05.26	"Good structure and pacing. The avatar adapts well…"	90 %
3	02.05.26	"Good structure and pacing. The avatar adapts well…"	80 %
4	02.05.26	"Good structure and pacing. The avatar adapts well…"	70 %
5	02.05.26	"Good structure and pacing. The avatar adapts well…"	60 %

Entry structure: a 136px avatar (rounded-[146px]) plus a 24px date and 32px text.

Technical requirements

• Comments come from GET /api/agents/:id/comments.
• The fade-out is a CSS gradient over the lower entries.

8.16 Collaboration — request form (4292:785)

Purpose: the form for sending a partnership or collaboration request — a subscreen of §8.6.

Background: bg-gradient-to-b from-[#2e5f98] to-[#0d2440] plus the mountain background (blur, opacity 15 %, mix-blend-overlay).

Heading: "Collaboration & Partners" — single and centred.

Contact information

• "Contacts & Partnerships" — Lemon Chiffon, Space Grotesk, 48px.
• Description: "We're open to collaboration with educational institutions, businesses, media, and technology partners."
• "Press & Partnership Inquiries" — a subheading.
• Email: partnerships@amadeq.com plus a Request button (glass, rounded-[56px]).

Collaboration request form

Field	Placeholder
First name	"First name..."
Last name	"Last name..."
Email	"Email..."
Country	"Country..."
Type of collaboration	"Type of collaboration..."
Message	"Type a text..." (multi-line, rounded-tl-[12px] rounded-br-[42px])

Every input: bg-white, rounded-[41px], shadow-[inset_0px_4px_4px], wrapped in a glass rounded-[52px] container.

Buttons: Back (ghost) | Reset (ghost, 50 % opacity) | Send (gold border #E6B84C).

Technical requirements

• POST /api/collaboration submits the form.
• Validation: email format and required fields.
• The "Request" button either opens mailto:partnerships@amadeq.com or the form.

8.17 Road Map — "Questions" tab (FAQ) (4291:3779)

Purpose: the first tab of the Road Map section — frequently asked questions.

Tab switcher: Questions (active, 64px) | Roadmap (50 %) | Uniqueness (50 %).

Heading: "Frequently Asked Questions" — Alexandria Regular, 64px.

FAQ cards (a carousel with ← → navigation)

Question	Answer
Does AMADEQ work in a browser?	Yes. AMADEQ is designed for use in schools, educational programs, and businesses…
What are the technical requirements for the demo?	Any modern device is enough. Headphones are recommended, and a microphone is optional.
Is participation in the demo free?	Yes. The demo is free to try. Some interactions are limited before Early Access.
Are my personal data stored?	User data may be stored only with the user's consent, to improve personalization.
Can it be used in schools or for business upskilling?	Yes. AMADEQ is designed for use in schools, educational programs, and businesses.

The ← → arrows are 64×64px SVGs on either side of the card.

Floating comments background: animated cards of real user comments in the background (horizontal strips, shadow-[16px_16px_24px]):

• "The avatar explains complex topics in a surprisingly clear way."
• "The real-time responses make it feel personal."
• "Learning feels calm and focused, not rushed or overwhelming."
• "I didn't expect real-time interaction to make such a difference."
• "No simplification, no overload. Complex topics explained clearly at real exam level."

"Leave a comment" field

• Heading in Lemon Chiffon, 48px.
• Input: bg-[#e7f0fa], rounded-[60px], placeholder "Write your text...", with a 96px microphone.

Technical requirements

• The FAQ cards form a horizontal swipe carousel.
• The floating comments use a CSS marquee or a Framer Motion scroll animation.
• The comment input posts to POST /api/comments, or is auth-gated for unregistered users.

8.18 Interactive Demo — "Info" tab (4288:1581)

Purpose: the first tab of the Interactive Demo section — the project description and target audience.

Background: bg-gradient-to-b from-[#305f9a] to-[#7ca4cf] plus a space texture (blur 3px, mix-blend-luminosity, opacity 50 %).

Tab switcher: Info (active, 64px, centre) | Agent Demo (50 %) | Chat (50 %).

"About the Project" section

• Heading in Lemon Chiffon, 48px.
• Text: "AMADEQ is real-time learning powered by live AI avatars and interactive 3D scenes. We make knowledge clear, accessible, and natural to understand."

Bulleted rationale

• Why Unreal Engine — a fully immersive environment, not static video.
• Why Real-Time — instant answers; learning as a dialogue.
• Global Access — available anywhere, even without a permanent internet connection.
• Mission — a high-quality personal tutor for every child.

"Who It's For" section, with progressive fading:

Audience	Opacity	Key benefits
Children	100 %	Interactive learning, offline use, gamification
People with Disabilities	50 %	Audio and visual interaction, sign language
Entrepreneurs & Professionals	25 %	Analytics, workflow optimization, security
Conscious Learners (Parents, Students)	20 %	Structuring knowledge, mentor support

CTA button: "Back to Avatar Demo →" — ghost, rounded-[75px], 64px.

Technical requirements

• "Back to Avatar Demo" switches the tab to "Agent Demo".
• Scrolling happens inside the section (overflow-y: auto).
• The fade-out for audiences below the first is an opacity effect.