Auth & Onboarding

Every auth and onboarding screen shares one layout: 1920×1080px, a dark blue gradient (#0d2440 → #2e5e99), a starfield background (Space 3, opacity 50 %, blur 3px) plus a mountain image, a vignette overlay in the centre, and the AMADEQ logo at the top left. The Back to Site button sits in the top-right corner.

The central container is 1240px wide, rounded-[36px], with a glass-morphism background (rgba(13,36,64,0.5)) and shadow-[16px_16px_24px_rgba(0,0,0,0.16)].

7.1 Registration — Sign Up (744:650)

Purpose: registering a new account.

Two-column layout

Left column (the form)

• OAuth buttons (44px high, rounded-[36px], a from-rgba(231,240,250,0.25) gradient):
  • Sign in with Google
  • Sign in with Apple
  • Sign in with Facebook
  • Sign in with Microsoft
• Input fields (white background, rounded-[24px], inner shadow 0px 4px 4px rgba(0,0,0,0.25)): Email..., Password....
• Checkboxes:
  • Subscribe to updates (optional) — a 32px square.
  • I agree to the Privacy Policy (required) — with a checkmark icon.
• Links: Don't have an account? Sign Up | Forgot password?.
• CTA button Sign In (gold border #e6b84c, gold text).

Right column

• The AMADEQ logo (the Q icon in a dashed circle, 318px).
• The slogan Learn yourself (Lemon Chiffon, 64px, Space Grotesk).
• A Sign Up button (gold border).

Technical requirements

• POST /api/auth/signup — email plus password.
• POST /api/auth/oauth — provider (google / apple / facebook / microsoft).
• Validate the email format and a minimum password length.
• The Privacy Policy checkbox is required before submit.

7.2 Registration — Sign In (4335:83)

Purpose: signing in to an existing account.

Two-column layout, mirroring §7.1.

Left column

• The AMADEQ logo (the Q icon in a dashed circle, rotated 180°).
• The slogan Learn yourself.
• A Sign In button (gold border).

Right column (the form)

• The same four OAuth buttons.
• Input fields: Email..., Password..., Confirm Password....
• Link: Already have an account? Sign In.
• CTA button Sign Up (gold border, gold text).

Technical requirements

• POST /api/auth/signin — email plus password.
• A JWT token in an httpOnly cookie.
• On success, redirect to /app/home, or into onboarding on a first sign-in.

7.3 Your Profile — Welcome (4336:563)

Purpose: the first screen after login, encouraging the user to fill in their profile.

Two-column layout (a centred card)

• Heading: Let's Start the Adventure (Lemon Chiffon, 64px, Space Grotesk, 447px).
• CTA button My Profile (gold border #e6b84c, gold text, rounded-[32px]).
• The right side: the AMADEQ Q logo (Frame191, 447px).

Technical requirements

• Shown when user.onboardingComplete === false.
• "My Profile" leads to onboarding, or to Settings → Profile.
• Back to Site redirects to the landing page (/).

7.4 Onboarding — Role (4335:221)

Purpose: determining the user's role — step 1 of 3.

Onboarding navigation bar (the top of the card)

• Three dot icons; the active one is large, the rest small.
• « / » arrows for moving between steps.
• The current step: Role (text under the active dot).
• A Skip for now link on the right.

Role grid (2 rows × 3)

Row 1	Row 2
Student	Partner
Parent	Dev/Tech (highlighted — 344px, background opacity 0.12)
Teacher	Organization

Each card: 320×192px, rounded-[20px], bg-rgba(231,240,250,0.06), a 96px icon plus a label (Lemon Chiffon, Bold, 24px).

Technical requirements

• PATCH /api/user/profile → { role: 'student' | 'parent' | 'teacher' | 'partner' | 'dev_tech' | 'organization' }.
• The choice is saved, and the "next" button — or a click on the card — moves to step 2.

7.5 Onboarding — Access Method (4336:13)

Purpose: choosing the access platform — step 2 of 3.

Navigation bar: dot 2 active, heading Access Method.

Option grid (1 row × 3)

Card	Icon	Label
Web (browser)	Atom icon	Web (browser)
Mobile app	Smartphone icon	Mobile app (Android / iOS)
Desktop app	Desktop icon	Desktop app (macOS/Windows)

Technical requirements

• PATCH /api/user/profile → { accessMethod: 'web' | 'mobile' | 'desktop' }.
• After the choice, move to step 3 (Goal).

7.6 Onboarding — Goal (4336:393)

Purpose: determining the usage goal — step 3 of 3.

Navigation bar: dot 3 active, heading Goal.

Goal grid (2 rows × 3)

Row 1	Row 2
I want to test the agent	I want to create AI-generated content
I want to integrate this into my school/company	I want a personal AI assistant for planning
I want to train my team	I want to use interactive learning modules

Technical requirements

• PATCH /api/user/profile → { goal: string }.
• After the choice, set user.onboardingComplete = true.
• Redirect to /app/home.

7.7 Shared auth requirements

• OAuth providers: Google, Apple, Facebook, Microsoft (through NextAuth.js or Supabase Auth).
• Session: a JWT in an httpOnly cookie, with refresh-token rotation.
• Route protection: middleware checks for a session; /app/* redirects to /auth/signin when unauthenticated.
• Onboarding: shown only when user.onboardingComplete === false; every step can be skipped through Skip for now.
• Back to Site: always leads to the landing page (/) and is available on every auth and onboarding screen.