AE Strategies · Website Prototype

A federal consulting website
built to perform.

This document summarizes the architecture, design decisions, completed work, and remaining roadmap for the AE Strategies web presence — built by Jackson, Morin & Co. on Next.js and deployed to Vercel.

Client AE Strategies, McLean VA
Live URL aestrategies.jacksonmorinco.com
Repository github.com/jacksonmorinco/ae-strategies
Stack Next.js 16.2 · TypeScript · Tailwind v4 · Vercel
Document Date March 2026
Status Prototype Complete
01Project Brief 02Vision & Working Model 03Technical Stack 04Completed Work — Homepage 05Completed Work — Navigation 06Build Roadmap — Interior Pages 07Build Roadmap — Features 08Contract Vehicles Reference
01 — Project Brief

What we're building, and why.

AE Strategies is a 22-year-old federal management consulting firm with a 100% contract success rate, 50+ agency clients, and three pre-competed contract vehicles. Their existing web presence does not reflect this record. This project replaces it.

The Problem
  • The existing site communicates nothing about AE's depth, track record, or procurement advantages to a procurement officer evaluating vendors.
  • No contract vehicle information is surfaced — a significant missed opportunity given HCATS, OASIS+, and Seaport-NxG hold enormous procurement value for federal buyers.
  • The brand reads as generic federal consulting. AE's 22-year record, 100% success rate, and Washington DC presence are buried or absent.
  • No data layer exists — team members, testimonials, services, and case studies live only in static files with no reuse architecture.
The Opportunity
  • Position the track record front and center. 22 years. 100% success. These are not small claims in the federal space — they should dominate the visual hierarchy.
  • Make procurement easy. Contract vehicles with actual contract numbers, scope descriptions, and pool designations — accessible from the nav, surfaced on the homepage, and detailed on a dedicated page.
  • Build a reusable content architecture so future content updates (new team members, new testimonials, new case studies) require only data file changes, not code changes.
  • Design something that earns credibility on first impression — photography of DC landmarks, sophisticated typography, and a visual system that signals institutional quality.
Founded
2003
Contract Record
100% Success Rate
Agencies Served
50+ Federal Organizations
Contract Vehicles
HCATS · OASIS+ · Seaport-NxG
HQ
McLean, VA (1751 Pinnacle Dr., Ste 600)
DC Office
1140 3rd St NE, Washington DC 20002
Main Contact
(703) 286-0880 · info@aestrategies.com
CEO Direct
Patrick Niehus · (703) 314-0298
02 — Vision & Working Model

The design philosophy.

The site should feel like it was designed by the kind of firm it represents — disciplined, authoritative, Washington-native. Not a SaaS template with federal colors applied. A real institutional identity.

Primary Audiences
Audience 01
Procurement Officers
Federal contracting personnel evaluating vendors. Need: contract vehicle numbers, scope of work, pool designations, and past performance signals. They will go directly to Contract Vehicles.
High priority · Direct path to /contract-vehicles
Audience 02
Agency Leadership
SES and senior managers looking for a trusted partner for complex programs. Need: credibility signals, track record, testimonials from peer agencies, and a human point of contact.
High priority · Testimonials + Patrick direct contact
Audience 03
Prospective Employees
Consultants and analysts evaluating AE as an employer. Need: culture signals, team quality, career development story, Glassdoor rating, and current openings.
Medium priority · /about/culture + /careers
Core Design Principles
  • Less is more. Every section must earn its place. We cut the "Headquartered where federal policy is made" band, removed redundant photo dividers, and collapsed the footer from 5 to 4 columns.
  • The record is the headline. 22 years and 100% success rate appear above the fold, in the stat bar, and in the nav feature panels. These are not footnotes.
  • Washington DC is the visual identity. Lincoln Memorial aerial, Washington Monument with cherry blossoms, Capitol architecture — these photos do the brand work that words can't.
  • Chapter markers create hierarchy. 01 Services / 02 Our Clients / 03 Impact / 04 Get In Touch — every section is numbered, labeled, and part of a sequential argument.
  • Dark sections punctuate light ones. White (Stats) → Cream (Services) → White (Clients) → White (Impact) → Photo (CTA). The rhythm is intentional.
  • Contract vehicles are not fine print. They belong in the nav, on the homepage credential strip, and on a dedicated interior page with full procurement details.
Page Argument (Homepage Flow)
  • Hero — Immediate credibility. "Solving the Federal Government's Hardest Problems." Lincoln Memorial aerial. Credential strip: 50+ Agencies · 100% Success · OASIS+ · HCATS.
  • Stat Bar — The numbers. 22 years. 100% success. 50+ organizations. 4.8★ Glassdoor. 3 contract vehicles. Animated on scroll.
  • Services — Five practice areas with interactive featured card. Hover each service → the illustration updates.
  • Our Clients — 50+ agency seals in a grid with hover-to-testimonial interaction. Ghost "50" architectural title treatment. Cream quote card.
  • Impact — Three case study cards. Asymmetric layout: 1 tall (350,000 SF) + 2 stacked (15 min, 30+). DC architecture backgrounds.
  • Get In Touch — Washington Monument / cherry blossom panorama at 90vh. Floating dark card with blue accent bar. Patrick Niehus direct contact below the divider.
03 — Technical Stack

Infrastructure & tooling.

LayerTechnologyNotes
FrameworkNext.js 16.2.1 (Turbopack)App Router, TypeScript, server components where applicable
StylingTailwind CSS v4 + inline stylesDesign tokens via CSS custom properties in globals.css
FontsDM Serif Display · Inter · DM MonoGoogle Fonts via next/font. Display = headings, Sans = UI, Mono = labels/metadata
DeploymentVercel (auto-deploy on push)git push main → live in ~60 seconds
DomainCloudflare DNS → VercelCNAME: aestrategies → cname.vercel-dns.com, proxy OFF
RepositoryGitHub: jacksonmorinco/ae-strategiesMain branch, no CI/CD beyond Vercel integration
Image Assets274 scraped images + 9 agency seals + LOC photographyAll in public/images/. SVG seals for crispness.
Data LayerTypeScript files in src/lib/data/testimonials.ts · team.ts · services.ts · clients.ts · contractVehicles.ts · stats.ts
Brand Tokens (Locked)
AE Navy
#231E4B — primary dark
AE Blue
#4187FF — "ae" lettermark, accents
Deep Dark
#0F0C1E — dark section backgrounds
Cream
#F5F3EE — quote cards, warm off-white
Display Font
DM Serif Display — headings, numbers, quotes
Body Font
Inter — all UI text, descriptions
Label Font
DM Mono — eyebrows, contract numbers, metadata
Section Cream
#F5F3EF — services section background
04 — Completed Work

The homepage, section by section.

The homepage is fully built and live. Every section has been designed, iterated on, and refined through multiple rounds of review. What follows is a detailed account of each section's design intent and implementation.

Hero Section
01
Split 55/45 layout — dark navy left, Lincoln Memorial aerial right

Ghost "Federal" text at 8% opacity creates layered depth on the left panel. Dot grid background texture. Diagonal seam between panels. Large DM Serif Display headline with "Government's" in brand blue. Shortened description: "Twenty-two years. A perfect contract record. Built for the agencies that run this country." Two CTAs: Explore Services (primary blue) + Get in Touch (dark outline). Credential strip at bottom: 50+ Agencies · 100% Success · OASIS+ · HCATS.

LivePhotography
Stat Bar
02
Editorial split — left statement, right animated counters

Left panel: "22 years. 100% success on every contract." in serif italic with blue accent. Right panel: five stats in a horizontal row with vertical dividers — 50+ Federal Organizations, 100% Contract Success Rate, 22 Years of Service, 4.8★ Glassdoor Rating, 3 Contract Vehicles. Numbers animate on scroll via IntersectionObserver. Sublabels removed to reduce typographic noise.

Live
Services Section
03
Interactive featured card — hover service row → image updates

Cream background (#F5F3EF). Left: large featured photo card (illustration changes on hover). Right: five service rows. Hovering a row highlights it in navy and swaps the featured card image. Gradient fixed to show actual photo in upper half (from transparent at 75% down to near-opaque at bottom). "View practice area →" CTA at 0.9375rem. Chapter marker: 01 — Services.

LiveInteractive
Our Clients Section
04
Architectural "50+" title treatment + 16-seal grid + hover-to-testimonial

White background. Left column: Ghost-outline "50" in WebkitTextStroke at 8rem — blueprint aesthetic. Solid "+" on same flex row. Thin blue rule. "FEDERAL / ORGANIZATIONS" in mono all-caps. 16 agency seals in 5-column grid — 7 original scraped seals + 9 newly sourced SVGs (OPM, HHS, USAF, Army, VA, State, DOE, NRC, DOL). Hovering a seal with a testimonial swaps the quote card. Right: Cream (#F5F3EE) quote card with large ghost quotation mark. Default: DOD testimonial. Blue dot indicators on seals with associated quotes. Chapter marker: 02 — Our Clients.

LiveInteractive16 Agency Seals
Impact / Case Studies
05
Asymmetric case study cards — 1 tall + 2 stacked

White background with 96px top / 160px bottom padding (extra bottom creates breathing room before the CTA photo). 1.1:1 column grid. Left: tall card (560px) — 350,000 SF of federal workspace modernized, Jefferson Memorial background. Right stacked: 15 min average process improvement, 30+ learning solutions deployed. DC architecture photography as card backgrounds. Numbers in DM Serif Display. Hover reveals description. Chapter marker: 03 — Impact.

LivePhotography
CTA — Mini Hero
06
Washington Monument / cherry blossom panorama with floating dark card

90vh section. Full-bleed photography (Washington Monument with cherry blossoms in bloom). Top-only white fade (22% height) connecting to the Impact section above. No bottom fade — photo runs into the footer's dark navy. Floating card: rgba(12,9,28,0.92) with backdrop-filter blur(16px). 3px blue gradient accent bar at top of card. Eyebrow: "04 — Get In Touch". Headline: "We look forward to / partnering with you." in white/blue. Description, two CTAs left-aligned, divider rule, Patrick Niehus direct contact (name + phone in mono).

LivePhotography
05 — Completed Work

Navigation system.

Nav Behavior
  • Scroll-aware: transparent on hero → white background + shadow once scrolled 60px. Logo swaps from white to light-background version. Link colors follow.
  • Dropdown timing: 120ms close delay prevents accidental dismissal. Dropdowns use CSS animation (ddIn) for smooth entry.
  • Left-aligned dropdowns: All panels open flush with the left edge of their trigger button — not centered.
  • Mobile hamburger: Hidden on desktop (>900px). Full-screen overlay with accordions for Services and About.
Services Dropdown — 980px

Interactive panel. Hovering each service row in the left column updates the featured photo in the right panel — the same interaction as the homepage Services section. Default state shows the Lincoln Memorial aerial with the 100% contract success rate stat. Each hovered service shows its own illustration.

About Dropdown — 1060px

Three items (Our Story, Our Culture, Meet the Team) rendered with the large prop — items are 1.0625rem with more padding than Services items. Feature panel is 420px with the company photo mosaic. Stat: "50+ Federal organizations."

Contract Vehicles Dropdown — 920px

Four-card grid, one card per vehicle. Each card: program name in DM Serif Display blue at 1.25rem, pool designation in mono all-caps, thin divider rule, contract number in dark navy mono, scope description (2-line truncation), Best-in-Class badge for GSA vehicles. Light grey (#F7F7F9) card backgrounds. Hover: blue border + blue left accent bar fully opaque + subtle shadow.

Footer — 4 Columns

Simplified from the original 5-column layout. Careers folded into Company column. Explicit column widths: 2fr 1.5fr 1.5fr 2.5fr. Services · Company (incl. Careers) · Contract Vehicles · Contact. Bottom bar: logo, copyright, LinkedIn icon, JMCo credit.

06 — Completed Work

Data layer & content.

All content is managed through TypeScript data files in src/lib/data/. Updating content anywhere on the site requires only editing these files — no component code changes needed.

FileContentsCount
testimonials.ts7 testimonials with agency, quote, sealImage, and role fields. Sources: DOJ, DOD, DHS, Navy ×3, Forest Service.7 records
team.tsFull leadership team with Patrick Niehus (CEO), Allan Walters (COO), and 11 additional members. Each record has name, title, bio, photo path, and optional quote.13 members
services.ts5 services with id, slug, navLabel, fullName, tagline, description, illustrationImage, and case study content.5 services
clients.ts16 federal agencies with sealImage paths, shortName for text fallback, and category (defense/civilian). All 16 now have seal images.16 agencies
contractVehicles.ts4 vehicles with program, fullName, contractNumber, pool, scope, naicsCodes, bestInClass, and gsa flags.4 vehicles
stats.tsHomepage stat bar data — number, label pairs for the animated counter display.5 stats
07 — Build Roadmap

What comes next, in order.

The roadmap is organized by building order, not calendar time. Each phase builds on the last — interior pages require the design system established in Phase 1, features require the pages they enhance.

Phase 1 — Foundation
Complete. The homepage, navigation system, data layer, design tokens, and deployment pipeline are all live and working. This phase is the prerequisite for everything below.

Phase 2
Interior Pages

Core Interior Pages

  • /about — Our Story, 22-year history timeline, founding principles, What Sets Us Apart section. Pull from team.ts for the leadership preview.
  • /about/team — Leadership grid with headshots, bios, and pull quotes. Patrick Niehus and Allan Walters featured prominently. Team data already in team.ts.
  • /about/culture — Photo mosaic, Hero Dogs section, Glassdoor 4.8★ prominent, culture statement. Collegial, mission-driven narrative.
  • /services/[slug] — Dynamic service pages. 5 slugs already defined. Each page: hero, practice description, case study block, related testimonials, CTA. Data in services.ts.
  • /contract-vehicles — Full procurement reference. 4 vehicle cards with full NAICS codes, contract numbers, scope, pool designations. "How to work with us" procurement guide. This page is critical for procurement officers.
  • /contact — Dual office map/address, Patrick direct contact, general inquiry form, response time commitment.
Phase 2b
Careers

/careers — Dynamic Suppression When Empty

  • Openings list — Dynamic. When 0 openings, the page shows culture/benefits only, and all Careers nav links and CTAs are suppressed site-wide.
  • Benefits and development — Employee development programs, benefits overview, Glassdoor rating, culture photography.
  • Virtual booklet — Optional: downloadable careers PDF generated from the same data.
Phase 3
Features

Interactive Features

  • Nationwide team map (Mapbox) — Plot team member locations as dots on a DC-centered map. AE is a national firm — the map proves it visually. Requires Mapbox API key + team location data added to team.ts.
  • Case study pages (/services/[slug]#case-study) — Full case studies with methodology, outcomes, and client attribution. Content already partially in services.ts.
  • Testimonials page or component — All 7 testimonials surfaced in one place, filterable by agency or service line.
  • Search — Optional lightweight search across services, case studies, and team members.
Phase 4
Launch

Pre-Launch Requirements

  • Mobile responsiveness pass — Homepage sections need a systematic mobile review. The hero, stat bar, client voices, and CTA all need breakpoint-specific adjustments.
  • SEO baseline — metadata exports on every page. OpenGraph images for social sharing. Sitemap generation. robots.txt.
  • Analytics — Vercel Analytics or Google Analytics 4. Track: contract vehicles page views, contact form submissions, and service page engagement.
  • Accessibility audit — Focus management, aria-labels, color contrast on dark sections, keyboard navigation through dropdowns.
  • Domain transfer — Move aestrategies.com DNS to point to the Vercel deployment. Currently on aestrategies.jacksonmorinco.com for staging.
  • Content review — AE team reviews all copy, team photos, and case study details before production launch.
  • Form backend — Contact form needs a submission handler (Resend, Formspree, or custom Next.js API route sending to info@aestrategies.com).
08 — Content Inventory

Photography & assets.

Photography In Use
FileUsed InSource
hero-wwii-memorial.jpgHero right panel, Services nav panel defaultLibrary of Congress
loc-art-deco-relief.jpgCTA section background (Washington Monument / cherry blossoms)Library of Congress JP2 conversion
loc-capitol-rotunda.jpgAvailable for interior pagesLibrary of Congress JP2 conversion
loc-library-interior.jpgAvailable for interior pagesLibrary of Congress JP2 conversion
hero-jefferson-memorial.jpgImpact section — 350,000 SF cardScraped from aestrategies.com
dc-ftc-building.jpgImpact section — 15 min cardScraped from aestrategies.com
dc-rowhouses.jpgImpact section — 30+ cardScraped from aestrategies.com
hero-satellite.jpgNational Band section backgroundScraped from aestrategies.com
Agency Seals (16 Total)
AgencyFileFormat
Department of Justicewp-content_uploads_2022_01_Department_of_Justice.pngPNG (scraped)
Department of Defensewp-content_uploads_2022_01_Department_of_Defense.pngPNG (scraped)
Department of the Navywp-content_uploads_2022_01_Navy.pngPNG (scraped)
Dept. of Homeland Securitywp-content_uploads_2021_10_Department_of_Homeland_Security.pngPNG (scraped)
Food and Drug Administrationwp-content_uploads_2023_03_FDA-Logo.pngPNG (scraped)
General Services Administrationwp-content_uploads_2021_10_GSA-1.pngPNG (scraped)
US Forest Servicewp-content_uploads_2021_11_Forest_Service-1.pngPNG (scraped)
Office of Personnel Managementseal-opm.svgSVG (Wikipedia)
Dept. of Health & Human Servicesseal-hhs.svgSVG (Wikipedia)
Department of the Air Forceseal-usaf.svgSVG (Wikipedia)
Department of the Armyseal-army.svgSVG (Wikipedia)
Department of Veterans Affairsseal-va.svgSVG (Wikipedia)
Department of Stateseal-state.svgSVG (Wikipedia)
Department of Energyseal-doe.svgSVG (Wikipedia)
Nuclear Regulatory Commissionseal-nrc.pngPNG (Wikipedia)
Department of Laborseal-dol.svgSVG (Wikipedia)
09 — Contract Vehicles Reference

Procurement information.

AE Strategies holds three pre-competed contract vehicles, enabling federal agencies to procure services without the overhead of a full competition. Three of four vehicles carry GSA Best-in-Class designation.

HCATS · Pool 1
Human Capital & Training Solutions
Professional and Management Development Training. NAICS 611430. Small Business Pool 1. GSA Best-in-Class designated vehicle for human capital and training support across all federal agencies.
Contract No. GS02Q16DCR0074 · Best-in-Class
HCATS · Pool 2
Human Capital & Training Solutions
Human Resources Consulting Services. NAICS 541612. Small Business Pool 2. Complements Pool 1 — together these two vehicles cover the full spectrum of human capital and HR consulting work.
Contract No. GS02Q16DCR0083 · Best-in-Class
GSA OASIS+
One Acquisition Solution for Integrated Services Plus
AE's broadest vehicle. Covers IT professional services, human capital strategy, workforce analysis, employee performance management, management consulting, program and project management, and professional training. Multiple NAICS codes.
Contract No. 47QTCAD004S · Best-in-Class
US Navy · Seaport-NxG
Seaport Next Generation
Professional, technical, and management support services for Department of the Navy programs. Administered by the Naval Sea Systems Command. AE's primary vehicle for Navy-specific engagement.
Contract No. N0017819D7067 · Navy NAVSEA
10 — Design Decisions

Key decisions & rationale.

DecisionRationale
Cut the National Band section"Headquartered where federal policy is made" was a weak one-liner. The hero eyebrow and CTA location details carry the same information more elegantly.
Ghost "50" outline treatmentBlueprint/architectural aesthetic echoes the firm's Washington DC identity. WebkitTextStroke at 3px creates the technical drawing quality without a custom font.
CTA as mini-hero at 90vhThe Washington Monument photo is too strong to use as a thin divider. 90vh lets the panorama breathe and the floating card feel genuinely placed — not dropped on top.
Top-only fade on CTA photoTop fade connects to the white Impact section above. No bottom fade — the photo runs directly into the footer's dark navy, which is a cleaner transition than a white fade to dark.
Cream quote card on white sectionDark card on dark background = low contrast. Cream card on white background = strong lift. The testimonials section is white, so the quote card is #F5F3EE.
16 agency seals, not 77 scraped seals left the grid sparse and unimpressive. 16 covers the full breadth of AE's client base and makes the "50+ agencies" claim visually credible.
Contract vehicles in the nav dropdownProcurement officers navigate directly to contract vehicles — they need to find this information in one click from any page. A plain link was insufficient for something this important.
Services dropdown: interactive imageThe nav dropdown mirrors the homepage Services section behavior. Consistency between the nav preview and the full section builds coherence and rewards exploration.
Footer from 5 to 4 columnsCareers merged into Company. The separate Careers column was creating a density problem — two small columns side by side at ~140px each. Merged, Company gets appropriate breathing room.
Stat sublabels removedThree font treatments (display number, sans label, mono sublabel) in a tight row created noise without adding clarity. Numbers + labels alone read cleanly.
11 — URL Structure

Planned page architecture.

RoutePageStatus
/HomepageLive
/aboutOur StoryPhase 2
/about/teamMeet the TeamPhase 2
/about/cultureOur CulturePhase 2
/servicesServices OverviewPhase 2
/services/mission-supportMission SupportPhase 2
/services/data-analyticsData AnalyticsPhase 2
/services/human-capitalHuman CapitalPhase 2
/services/trainingLearning & DevelopmentPhase 2
/services/talent-acquisitionTalent AcquisitionPhase 2
/contract-vehiclesContract VehiclesPhase 2
/careersCareers (dynamic suppression)Phase 2b
/contactContactPhase 2
Staging vs. Production Domain
The site currently lives at aestrategies.jacksonmorinco.com for review and iteration. The production domain aestrategies.com will point to the same Vercel deployment once content is reviewed and Phase 4 pre-launch requirements are satisfied. DNS change is a single CNAME update — no code changes required.
Document Prepared By
Jackson, Morin & Co. · home.jacksonmorinco.com
For
AE Strategies · Patrick Niehus, CEO
Live Preview
aestrategies.jacksonmorinco.com
Date
March 2026