# Landing-page design concepts: A&P Test Ready and Private Pilot Mockups only. Nothing here is live, and no live site files were changed. Prepared Nov 12, 2026. Both concepts follow the current aviationtestready.com landing page: a soft sunbeam with no hard edges, haze drifting in the hero, a shine across the headline, clean text path cards that lift on hover, and a lesson video. Each concept adds two things. Blueprint line art sits under every icon, and a scroll sequence draws a blueprint that then turns into the video. Each site has its own imagery, and neither reuses the Cessna. Shared rules: one hero image per site, no trust strip, no white boxes behind labels, the tagline exactly "Don’t just memorize…actually learn", and today's prices only. The motion is all CSS, SVG and canvas, with no 3D renders. --- ## Concept A: A&P Test Ready (aptestready.com) **Audience:** aircraft mechanic students. The imagery is a hangar, an engine on a stand, safety wire, a torque wrench, sheet-metal rivets and a logbook. ### Layout, hero to footer 1. **Nav:** the A&P Test Ready mark, What's inside, Flight path, Pricing, and a white "Free sample" button. 2. **Hero:** - **Photo:** a sunlit hangar with a flat-four piston engine on an orange engine stand. A torque wrench and a coil of safety wire sit on the cart. This is the only photo on the page. - **Copy (left):** the eyebrow "FAA A&P written tests · AMG · AMA · AMP", the headline "Pass your A&P writtens. *Know the why.*", the tagline, one line of copy, and two buttons: "Start the free sample" and "All-in · $69". - **Path cards:** three of them (General, Airframe, Powerplant), each showing "Kit $29". Each card has a faint blueprint mark in its corner: safety-wired bolts for General, a rivet row for Airframe and a finned cylinder for Powerplant. 3. **Blueprint to video (scroll sequence):** - "Start with the blueprint." A top-view line drawing of the Lycoming O-320 draws itself as you scroll. Callouts appear for cylinders 1 to 4 (Lycoming numbering), the prop flange, the accessory case and the magnetos. - "Then watch it come apart." The drawing softens and fades while the real engine-explode clip grows into a framed video. The caption lines below it cycle in step with the clip. 4. **What's inside:** four features, each with an icon over a blueprint drawing: - topic sign-offs (logbook); - 49 interactive diagrams (cylinder cross-section); - adaptive practice (torque wrench and its arc scale); - every answer cited (safety-wired bolts). 5. **Flight path:** a numbered vertical timeline in four steps: read, flashcards and quiz, topic sign-off, leg sign-off. The last step is tagged "Test Ready covers this". 6. **Accuracy:** a sample question card with its FAA-H-8083-32B citation. 7. **Pricing:** All-in $69 (highlighted), Single kit $29 per test, and Study guides $19 each or $39 for all three. Below that, the guarantee and military discount lines, unchanged. 8. **Final call to action:** the tagline as the headline over a resting sunbeam, with one button. 9. **Footer:** the FAA disclaimer and the AI-image note. ### Color palette | Role | Hex | |---|---| | Hangar navy (background) | `#0A1A2F` | | Body text on navy | `#E6EDF5` | | Muted text | `#9DB0C6` | | Accent, teal (buttons, card glow) | `#2DD4BF` / hover `#5EEAD4` | | Accent text on light | `#0F766E` | | Blueprint line | `#7DB9EE` | | Headline emphasis | `#9CC7F2` | | Tagline, warm | `#FFD9A8` | | Sunbeam tint | `#FFD6A0` (rgb 255,214,160) | | Light sections | `#F3F6F9` and `#FFFFFF`, ink `#0F172A` | Teal matches the "Mechanic" card on today's gateway, so the two sites stay recognizable as siblings. ### Illustration style - **Blueprint lines:** 1 to 1.6 px strokes in `#7DB9EE` with rounded caps. Center lines are dashed (6/6), and dimension lines are drawn thinner at about 60% opacity. Labels are small uppercase Inter, edged in navy, with no boxes behind them. - **Under the icons:** each icon sits on a navy tile with a 15 px blueprint grid and a line drawing of the same object. A radial mask fades the drawing out before it reaches the tile edges. The solid 2.2 px icon in teal sits centered on top with a soft teal glow. - **Motion:** when a tile scrolls into view, its blueprint draws itself in about 1.8 s and the dashed lines fade in after. ### Animation approach - **Intro (about 3.5 s):** the hangar photo starts dim, and a soft sunbeam blooms from the top-right windows. The beam uses only radial gradients in screen blend, oversized past the hero and masked on every side, so it never shows a straight edge. The photo brightens as the beam peaks, then the beam settles to a gentle resting glow. - **During the intro:** slow conic light rays sway a few degrees. Dust motes, drawn on a canvas, drift down through the beam and glow brighter inside it. The copy rises in at 1.1 to 1.7 s, the cards at 1.9 s, and a shine sweeps across "Know the why." at about 2.1 s. - **Scroll:** sections fade up as they enter. The blueprint sequence is pinned for about 2.8 screens of scrolling. The first 42% draws the lines, with labels appearing at set points along the way. - **Into the video:** from 46% to 70% of that scroll, the drawing blurs, scales up slightly and fades to about 8%. Meanwhile the video frame scales from 0.9 to 1 and fades in. The clip starts playing once the frame is mostly visible, and the heading crossfades to "Then watch it come apart." - **Hover:** path cards lift 6 px and their glow brightens. Feature icons rise slightly. - **Reduced motion:** with that setting on, everything shows statically. --- ## Concept B: Private Pilot (pilot landing) **Audience:** student pilots. The imagery is a different aircraft (a low-wing trainer, not the Cessna), a runway at sunrise, a sectional, a yoke and the instrument panel. ### Layout, hero to footer 1. **Nav:** the Aviation Test Ready mark, What's inside, Flight path, Pricing, and a white "Buy now" button. 2. **Hero:** - **Photo:** a white and blue low-wing trainer climbing out over a runway at sunrise, with the sun at the right edge of the frame. This is the only photo on the page. - **Copy:** the eyebrow "FAA Private Pilot (ASEL) knowledge test · PAR", the headline "Pass your Private Pilot written. *Learn to fly.*", the tagline, one line of copy, and two buttons: "Get the Full Program · $39.99" and "Free sample pages". - **Path cards:** two of them. Part 1, The Airplane and the Rules, at $14.99, with a yoke mark. Part 2, Flight Planning and Decisions, at $14.99, with a course-line mark. 3. **Blueprint to video (scroll sequence):** - "Plan it on paper." A cross-country sketch draws itself: a VOR compass rose with tick marks, departure and destination airports, the true course with checkpoint ticks, a dashed Class D ring, a runway plan view and a terrain contour. - "Then read the real chart." The sketch dissolves into the captioned "Reading a sectional" lesson, a 24 s cut of the existing clip on the FAA Seattle chart. 4. **What's inside:** four features, each with an icon over a blueprint drawing: - the guides (sectional); - animated lessons (six-pack panel); - 411 flashcards and 645 questions (yoke); - cited, not guessed (runway). 5. **Flight path to wings:** the seven FAA steps from the current page, as a numbered vertical timeline. Step 4, the knowledge test, is highlighted as "Test Ready covers this". 6. **Accuracy:** a sample question card citing 14 CFR 61.39. 7. **Pricing:** Full Program $39.99 is a tall highlighted card. Beside it are Study Guide $24.99, Flashcards & Quiz Kit $19.99, Part 1 $14.99 and Part 2 $14.99. 8. **Final call to action:** the tagline as the headline over a resting sunbeam, with both buttons. 9. **Footer:** the FAA disclaimer, the AI-image note and the "sectional not for navigation" note. ### Color palette | Role | Hex | |---|---| | Sky navy (background) | `#0B1F3A` (same as today) | | Body text on navy | `#E8EEF6` | | Muted text | `#A3B5CC` | | Accent, amber (buttons, card glow) | `#F59E0B` / hover `#FBB32F` | | Accent text | `#FCD34D` on navy, `#B45309` on light | | Blueprint line | `#9CC3F0` | | Headline emphasis | `#93B4E6` | | Tagline, dawn | `#FFE2A6` | | Sunbeam tint | `#FFDE96` (rgb 255,222,150) | | Light sections | `#F6F8FB` and `#FFFFFF`, ink `#0F172A` | ### Illustration style The pilot site uses the same blueprint system as Concept A, in a paler sky blue. The drawings take after chart symbology: compass rose ticks every 10° (longer every 30°), airport circles with a runway bar, and dashed airspace rings. The icons are a yoke, a six-pack panel, a folded sectional and a runway, all solid amber on navy tiles over their blueprint drawings. ### Animation approach - **Intro:** the same soft sunbeam, this time placed on the photo's sun at the right edge. The photo warms from dim to full as the beam peaks, then the beam settles. Warm haze drifts slowly, and there are no dust motes because this is open sky. A shine sweeps across "Learn to fly." - **Scroll:** the same pinned sequence as Concept A. The sketch draws, the labels appear, then it blurs and fades while the sectional lesson frame scales in and starts playing. The heading crossfades. - **Hover:** the same lift on the path cards and price cards. --- ## Mobile (both concepts) - **Hero image:** on phones the photo becomes its own 4:3 image at the top of the hero, positioned so the whole engine or the whole airplane stays in frame. The copy sits below it, so the hero subject is never cropped or hidden behind text. - **Layout:** path cards, features and pricing stack in one column. The blueprint sequence keeps its pin-and-dissolve, with larger labels; minor labels are hidden to keep it readable. ## Images and sources - **AI-generated (2):** the A&P hero photo, a hangar with an engine on a stand, torque wrench and safety wire (`assets/ap-hero.*`), and the Private Pilot hero photo, a low-wing trainer over a runway at sunrise (`assets/pp-hero.*`). Both were prompted to contain no text, numbers, registration marks or logos, and both are labeled as AI in the page footers. - **Code-drawn:** every blueprint drawing, icon, path-card mark, sunbeam, haze and dust mote (SVG, CSS and canvas). - **Existing Test Ready media:** the Lycoming O-320 engine-explode clip from the live A&P page, and a 24 s cut of the "Reading a sectional" lesson (FAA Seattle sectional, public domain, not for navigation). ## Files - **Prototypes:** `ap/index.html` and `pilot/index.html`, with shared files in `assets/` (`concept.css`, `concept.js`). - **Previews:** `videos/*-desktop.mp4` (1280×720, about 25 s) and `videos/*-mobile390.mp4` (390 px wide, about 14 s). - **Stills:** `stills/*.png`.