Rebuild the landing page from the Claude Design handoff - #146
Merged
Conversation
The homepage now follows "LangX Landing.dc.html": a centred hero (with the globe kept underneath, by decision), a single chat card with a correction, eight language chips, four feature rows with tinted icons, three plan cards rendered from plans.ts, the reviews in a three-column grid, and a yellow closing panel. The header and footer are the design's — logo, four links, one yellow button — with the theme switch kept; the footer also keeps a quiet row of legal links, which the design lacks but the app stores require. Every colour is a theme token, so the page holds in dark mode. Buttons take the design's pressed-into-a-hard-edge style; sizes follow the design too. Sections play in with GSAP ScrollTrigger through a `reveal` action. Elements are hidden by the stylesheet only after app.html's pre-paint script removes `no-js`, so a visitor without script or with reduced motion sees the page as it is. GSAP loads in its own chunk on first use; the prerendered HTML does not reference it. Story, Anywhere, OpenSource, FAQ, LanguageMarquee, NewsletterForm, Socials and the phone screens have no user on the homepage any more and are left in place. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The design's footer had four links, which left the blog, the tools and the legal pages reachable from nowhere. The five groups from before return under the design's top row, and the ad-hoc legal line goes, since Legal is one of them. Every "Start for free" and "Get the app" button now points at get.langx.io, which sends a phone to its store and a desktop to the web app. The explicit App Store, Google Play and "Web app" links stay where they are. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Second Claude Design pass, Duolingo-paced: a sticky translucent header, a text marquee of languages, three feature rows with the screen that shows each idea, six more features in a grid of hairlines, plan cards that list rows instead of ticks, reviews in two columns, the FAQ back on the homepage, and a closing mark with two stacked buttons. The hero and its globe stay as they were. The chat card under the hero is gone. The footer keeps the design's one line and puts the link groups under it, smaller and quieter, because the blog, the tools and the legal pages are reachable from nowhere else. Buttons are now set the way the app's are: small caps, a soft square corner, and a hard edge they press into. Every committing button goes to get.langx.io, which sends a phone to its store and a desktop to the web app. The FAQ said 18 or older; MINIMUM_AGE in packages/shared is 16. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The fine print under the buttons said what the new sentence already says, so it goes. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The hero globe now turns and tips with the page: a ScrollTrigger scrub drives a group above the spin, so the auto-spin and the drag keep their own rotation. The matching row gets a second, smaller globe in pair mode: two cities only, one arc growing between New York and Madrid, the globe turned to face them and holding still. The closing section's mark is the two hooks from Logo.svelte extruded and lit, turning on a vertical axis, with the flat mark as the fallback where there is no WebGL. Both new scenes pause off-screen and go still under reduced motion, as the hero's does. The header's mark turns too, but in CSS: it is on every page, and a canvas there would ship Three.js to the blog and the tools. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
It did not read; the two pills and the arrows say it better. The pair mode goes with it. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The card that used to sit under the hero now closes the page: mark, headline and buttons on the left, the chat on the right, stacked on a phone. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Beside the closing copy it split the ending in two. After the three feature rows it reads as their sum: the closing goes back to one column. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
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
1 participant
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.
Implements
LangX Landing.dc.htmlfrom the Claude Design handoff, on top of the hero globe from #145.plans.ts, reviews grid, yellow closing panel./blogwhich shares the header.revealaction.no-jsguard inapp.htmlso no-script and reduced-motion visitors get everything visible. GSAP ships as its own chunk (27 + 17 KB gzipped), homepage only.Left in place, no longer used on the homepage: Story, Anywhere, OpenSource, FAQ, LanguageMarquee, NewsletterForm, Socials, the phone screens.
npm run check,npm run lint,npx vite buildpass.🤖 Generated with Claude Code