Landing Sections

The landing sections, in scroll order.

4.1 Hero — First Screen

Figma node: 368:580 / 4294:402 · Anchor: #hero

Content

• Background: starry sky, nebulae, atmosphere.
• Heading: "The AI Tutor That Feels Like a Real Personal Teacher".
• Subheading: a short description of the platform.
• CTA buttons: Try Live Demo (primary, gold) and Reserve Spot in Closed Beta (secondary, outline).
• Social proof: 8,247 people already in line · First wave: 1,000 spots.

Technical requirements

• An animated starfield background (CSS particles or canvas).
• Responsive: the buttons stack vertically on mobile.
• The countdown is a dynamic JS timer.

4.2 Interactive Demonstration

Figma node: 368:537 · Anchor: #interactive

Content (split layout)

Left column:

• A 3D avatar frame (video/iframe, blurred preview).
• A START DEMO button.
• The "About the Project" text block: Mission · Global Access · Why Unreal Engine · Why Real-Time.
• The "Who It's For" block: People with Disabilities · Children · Entrepreneurs · Conscious Learners.

Right column:

• The heading Interactive Demo.
• Starfield background.

Technical requirements

• An iframe or WebRTC for the avatar video.
• An accordion or tabs for "About the Project".
• The START DEMO button navigates to #chat-demo.

4.3 MVP Demo (Demonstration)

Figma node: 4294:1229 · Anchor: #demo

Content

• A card with a blue-to-gold gradient border.
• The AMADEQ logo.
• A play icon.
• The text Product Demo.
• Navigation arrows (prev/next).

Technical requirements

• A video player (YouTube embed or in-house).
• Gradient border: linear-gradient(to right, #0D2440, #E6B84C).

4.4 All Services

Figma node: 4294:1958 · Anchor: #application

Four service blocks in a horizontal row, pill-shaped:

#	Name
1	Personal AI Agent & Assistant
2	Remote Video Rendering with Agents
3	Agent Marketplace
4	Team Learning & Upskilling

Technical requirements

• On mobile: horizontal scroll or a 2×2 grid.
• Hover effect: gold border plus glow.

4.5 Uniqueness (Features)

Figma node: 4311:394 · Anchor: #features

Eight blocks in a 4×2 grid, each with a 3D planet/orbit icon:

Row 1	Row 2
Voice Interaction 24/7	Preparation for Any Goal
Personality & Style	Gamified Learning (XP & Levels)
Works Even with Poor Internet	Diagnostic Assessment
Long-Term Memory Engine	Exam-Level Explanations

Technical requirements

• Grid: grid-cols-4 on desktop, grid-cols-2 on tablet, grid-cols-1 on mobile.
• 3D icons: PNG/WebP from the Figma assets, or Lottie animations.

4.6 Agent Marketplace

Figma node: 4294:1337 · Anchor: #marketplace

Content

• Category filters as pill buttons: All, Programming, Mathematics, Economy, Biology, Physics, Sports, Finance.
• A search bar.
• A grid of agent cards, each with the agent's avatar, name (for example "Adam"), rating ★ 4.2/5, price $32, tags such as Programming and Math, and a "Get Agent" button.

Technical requirements

• Filtering: client-side JS or an API.
• Pagination or infinite scroll.
• Cards reveal their buttons on hover.

4.7 Avatar / Agent Detail

Figma node: 4294:2030 · Anchor: #agent/:id

Three-column layout

• Left: a review feed (comments with avatars).
• Centre: agent info — name, rating ★★★★½, tags, description, price $32, and a gold Get Agent button.
• Right: the 3D avatar plus a START DEMO button.

Technical requirements

• Route: /agent/[id], or a modal overlay.
• Reviews: a scroll area with a fixed height.
• 3D avatar: video or a Spline/Three.js embed.

4.8 Interactive Chat Demo

Figma node: 4294:917 · Anchor: #chat-demo

Two-column layout

Left — the chat:

• Messages from "Adam" (AI) and "You" (the user).
• A text input plus a microphone button.
• The counter Your limit: 256 worlds.

Right — the avatar:

• The avatar video frame (blurred/live).
• Rotation: left and right arrows.
• The caption Adam.

Top bar: Back to Demo · End Demo · the word counter.

Technical requirements

• WebSocket or SSE for real-time chat.
• Speech-to-text for the microphone.
• A token limit enforced on the frontend.

4.9 Pricing

Figma node: 4294:2324 · Anchor: #pricing

Four plans

Plan	Price	Description
Explorer	$0	Free demo, limited access
Individual	$20/mo	Full real-time interaction
Founders Edition	$100 lifetime	Founder badge, 1000 users max
Pro / Organizations	Custom	Multi-user, custom pricing

Technical requirements

• A Monthly / Lifetime toggle.
• "Founders Edition" is highlighted with a gold border.
• Each plan's CTA leads into the sign-up flow.

4.10 Road Map

Figma node: 4311:2 · Anchor: #roadmap

Content

• A visual system of planets and orbits along an elliptical path.
• Six milestone markers on the orbit.
• The active milestone card, Milestone 2: Agents · Interactives · Application.

Technical requirements

• An SVG or CSS-animated orbit.
• Clicking a milestone expands its card.
• Animated movement along the orbit.

4.11 FAQ (Questions)

Figma node: 4311:223 · Anchor: #faq

Five questions

1. Browser compatibility.
2. Technical requirements.
3. Free demo availability.
4. Data privacy.
5. School / business use.

Background elements: comment bubbles with avatars. At the bottom: input fields for asking a question.

Technical requirements

• An accordion component.
• Background avatars: CSS-positioned, decorative.
• The input feeds a question-submission form (email or a Telegram bot).

4.12 Collaboration & Partners

Figma node: 4315:910 · Anchor: #collaboration

Left column — Partners & Media: EdTech Media logos · Partners logos · Foundations logos · a press carousel.

Right column — contacts form: First Name, Last Name · Email · Country (select) · Collaboration Type (select) · Message (textarea) · the buttons Send, Reset, Close · the address partnerships@amadeq.com.

Technical requirements

• Carousel: autoplay, pausing on hover.
• Form: validation plus submission (EmailJS or a backend endpoint).
• Country select: a list of countries.

4.13 Download Application

Figma node: 4315:1069 · Anchor: #download

Three-column layout

Desktop	QR Code	Mobile
Windows 64-bit	Scan to download	App Store
macOS	—	Google Play
Performance info	—	Cache management

Social media row: TikTok, Telegram, YouTube, Discord, Artstation, Reddit, Instagram, X, LinkedIn, Twitter, Facebook.

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

Technical requirements

• The QR code is either generated on the frontend or a static image.
• Social icons: SVG, turning gold on hover.
• Links: external links open in a new tab.