Refactor route groups and redesign landing page layout - #1
Merged
Merged
Conversation
The root layout forced `max-w-4xl` on every page, so the landing page could never run full-bleed. Move the signed-in pages under `(app)` and the landing page under `(marketing)`, and give each group its own layout: `(app)` keeps the reading-width container, `(marketing)` imposes nothing. Route groups don't appear in URLs, so every path is unchanged. The page files are pure moves — no content edits.
The old page described the product in a paragraph and three short pillars. Anyone can claim "adapts to you"; the thing worth showing is the mechanic itself, so the page now demonstrates it. - Hero: larger display type, a self-drawing underline, staggered entrance, and a factual capability strip (no invented numbers or testimonials). - 01 The mechanic: AdaptivePathDemo, a looping four-stage animation of a real path — seeded mastery skips a lesson, EWMA promotes one, a weak answer flips another to needs-review and hoists it to the top. Rows are absolutely positioned and moved by translateY so reorders animate rather than snap. Auto-advances, pauses on a deliberate click, holds still under prefers-reduced-motion. - 02 The flow / 03 Inside a lesson / 04 The tutor: concrete surfaces instead of claims — the real practice card, and a tutor exchange that plays out to the learner's own realization. - Close + footer, so the page ends deliberately. Two background overlays replace the single one: the top of the wave field was bright enough to eat the headline's contrast, and flattening the bottom to solid left every section below the fold on dead black. Motion (.reveal, .underline-draw) is CSS and all of it is disabled under prefers-reduced-motion. Reveal drives an attribute rather than state, so scrolling costs no re-renders.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
🟡 Changes recommended
Unresolved critical correctness issues remain in assessment, lesson completion, and topic resumption, along with additional error-handling and accessibility issues.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
Refactors route groups and redesigns the marketing landing page and signed-in learning interfaces.
Changes:
- Adds separate full-bleed marketing and constrained app layouts.
- Introduces animated landing-page demos and reveal-on-scroll behavior.
- Refreshes onboarding, assessment, dashboard, lesson, tutor, topics, login, and account experiences.
File summaries
| File | Description |
|---|---|
summary.md |
Documents the updated project structure. |
app/page.tsx |
Removes the former landing implementation. |
app/layout.tsx |
Delegates layout responsibility to route groups. |
app/globals.css |
Adds landing animations and motion styles. |
app/(marketing)/page.tsx |
Implements the redesigned landing page. |
app/(marketing)/layout.tsx |
Provides the full-bleed marketing shell. |
app/(marketing)/_components/Reveal.tsx |
Adds scroll-reveal behavior. |
app/(marketing)/_components/AdaptivePathDemo.tsx |
Adds the adaptive curriculum demo. |
app/(app)/tutor/page.tsx |
Adds threaded tutor interactions. |
app/(app)/topics/page.tsx |
Adds topic listing and continuation cards. |
app/(app)/onboarding/page.tsx |
Implements resumable onboarding. |
app/(app)/login/page.tsx |
Adds redesigned login and signup UI. |
app/(app)/learn/[lessonId]/page.tsx |
Adds lesson, practice, and completion flows. |
app/(app)/layout.tsx |
Provides the constrained app shell. |
app/(app)/dashboard/page.tsx |
Adds the progress dashboard. |
app/(app)/dashboard/loading.tsx |
Adds dashboard loading state. |
app/(app)/dashboard/DashboardSkeleton.tsx |
Defines dashboard skeleton content. |
app/(app)/curriculum/page.tsx |
Redirects legacy curriculum URLs. |
app/(app)/assessment/page.tsx |
Adds assessment and refinement flows. |
app/(app)/account/page.tsx |
Adds account and progress summaries. |
Review details
Suppressed comments (3)
app/(marketing)/_components/AdaptivePathDemo.tsx:154
- Reduced motion only disables the auto-advance interval; manually selecting a stage still animates every row for 700ms via this transition. Add a reduced-motion override so the interactive demo does not move when the user has requested motion reduction.
"transition-[transform,opacity,border-color] duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]",
app/(marketing)/_components/AdaptivePathDemo.tsx:205
- The caption is re-keyed with
animate-in fade-in-0on every stage change, so manual scrubbing still fades underprefers-reduced-motioneven after the carousel interval is disabled. Disable this animation for reduced-motion users as well.
className="text-muted-foreground animate-in fade-in-0 min-h-[2.5rem] text-sm leading-relaxed duration-500"
app/(marketing)/_components/AdaptivePathDemo.tsx:213
- These controls are exposed as
role="tab"inside a tablist, but there is no associated tabpanel,aria-controls, or tab keyboard behavior. Screen readers receive tab semantics for a scrubber that is not a complete tab interface; use a plain button group or implement the full tabs pattern.
<div className="flex gap-1.5" role="tablist" aria-label="Path stages">
{STAGES.map((s, i) => (
<button
key={s.label}
role="tab"
- Files reviewed: 9/20 changed files
- Comments generated: 2
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+98
to
+102
| <Dither | ||
| waveColor={[0.3, 0.4, 0.46]} | ||
| waveSpeed={0.03} | ||
| waveFrequency={3} | ||
| waveAmplitude={0.3} |
| }, | ||
| { | ||
| label: "The path rewrites", | ||
| order: ["grp", "join", "ts", "io", "idx"], |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces new layout and UI demo components for both the signed-in app and the marketing (landing) page, along with a utility for reveal-on-scroll animations. The main additions are structured, well-documented React components that provide animated and responsive UI elements for the landing and app surfaces.
New UI Components and Layouts:
AdaptivePathDemocomponent: Adds an animated, interactive demo for the landing page that visually explains the adaptive curriculum path concept, including lesson status transitions and reordering with pure CSS and state (no animation libraries).Revealcomponent: Introduces a utility component that animates its children into view as they scroll onto the screen, using Intersection Observer and CSS for efficient, state-free animations.Layout Structure:
app/(app)/layout.tsx: Implements a signed-in app layout with a centered, reading-width container and appropriate padding, intended for all app pages except the marketing landing page.app/(marketing)/layout.tsx: Adds a layout for the marketing/landing page that is unconstrained (full-bleed), allowing custom section composition and rhythm.