A cinematic Next.js site about the United States built as a long-form patriotic experience: large hero media, editorial sections, data visualizations, image-led storytelling, and deep-dive pages for topics like economy, culture, quality of life, and more.
A patriotic editorial web experience, not a template.
The goal of this repo is to make the site feel intentional, premium, data-backed, and unmistakably American.
This repo is not a generic marketing site. It is structured like a content platform:
- homepage as an end-to-end narrative experience
- deep section pages with reusable layout and data components
- centralized image management through
IMAGES/+lib/site-images.ts - bilingual UI support for English and Romanian
- data-driven content in
lib/data/*instead of hardcoded JSX - section verticals that now include both economy and nature/geography
| Area | What makes this repo interesting |
|---|---|
| Visual style | cinematic hero, editorial sections, patriotic palette, strong imagery |
| Content model | facts and media are centralized instead of being scattered in JSX |
| Images | local asset library in IMAGES/ managed through one registry |
| Internationalization | English + Romanian UI with client + server locale handling |
| Storytelling | homepage is structured like a sequence, not a landing-page template |
| Deep dives | economy and nature already work as real content verticals |
Current routes:
/home page with hero, statement, stats, section grid, Why America blocks, map preview, video preview, data teaser charts, quote carousel, gallery preview, newsletter/economyfull landing page plus deep dives:/economy/gdp-growth/economy/capital-markets/economy/startups-venture-capital/economy/dollar-dominance/economy/trade-and-exports
/naturefull landing page plus deep dives:/nature/alaska/nature/rockies/nature/grand-canyon/nature/yellowstone/nature/great-lakes/nature/national-parks
/culture/culture/the-american-high-school/culture/american-aesthetics/quality-of-life/gallery/data/timeline/explorer/sitemap
The culture and quality-of-life pages are currently clean scaffolds with TODO zones, ready for content drops.
- rotating homepage hero with curated local imagery
- animated mega-menu with desktop dropdowns and mobile overlay
- reading progress bar and floating back-to-top button
- data teaser charts with USA-highlighted comparisons
- map preview, video preview, quote carousel, and gallery preview sections
- economy section with full landing page plus five deep-dive routes
- nature section with a full landing page, animated visual components, and six deep-dive routes
- local image library with category folders for easier media management
- Romanian translation mode wired through provider state and cookies
- custom
STATEShomepage title treatment inStatesVideoTitle.tsx
| Layer | Tech |
|---|---|
| Framework | Next.js 16 App Router |
| React | React 18 |
| Styling | Tailwind CSS |
| Motion | Framer Motion |
| Charts | Recharts + D3 |
| Maps | react-simple-maps |
| Forms | React Hook Form + Zod |
| Data / backend | Supabase |
| Deployment | Vercel |
| Analytics | Vercel Analytics + Speed Insights |
npm install
npm run devOpen http://localhost:3000
Available scripts:
npm run dev # stable local dev, uses webpack
npm run dev:turbo # Turbopack variant
npm run build
npm run start
npm run type-checkNotes:
npm run devintentionally uses webpack because this repo previously hit Turbopack stability issues during local development.- production builds still use standard
next build.
npm run type-check
npm run buildCreate .env.local manually in the project root.
Required values:
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=The service role key is server-only. Do not expose it to the browser.
This repo uses Supabase for newsletter signup storage.
- Create a Supabase project
- Open the SQL editor
- Run
supabase-schema.sql - Add your environment variables in
.env.local
Relevant files:
app/actions/newsletter.tslib/supabase/client.tslib/supabase/server.tstypes/database.types.ts
app/
page.tsx home page
layout.tsx root shell
globals.css site-wide styles
economy/ economy landing + deep dives
nature/ nature landing + deep dives
culture/ culture hub + scaffolds
quality-of-life/ scaffold
gallery/ data/ timeline/ explorer/ sitemap/
components/
layout/ header, footer, breadcrumb, page chrome
sections/ editorial homepage and section components
data/ reusable chart components
nature/ animated, client-side nature visuals
forms/ newsletter form
providers/ language provider
lib/
data/ structured content and stats
site-images.ts central image registry
constants.ts nav, homepage hero, shared site constants
i18n/ locale config and server locale helpers
supabase/ backend clients
animations.ts motion variants
utils.ts helpers
IMAGES/
categorized local image library used by the site
If you are new to the repo, this is the shortest useful mental model:
IMAGES/ -> lib/site-images.ts -> lib/data/* or lib/constants.ts -> components -> pages
That flow is the backbone of the project:
- media lives in
IMAGES/ - image keys are centralized in
SITE_IMAGES - content and statistics live in
lib/data/* - components render the content
- pages assemble the full experience
The home page in app/page.tsx is intentionally composed from reusable sections.
Key section components:
components/sections/HeroSection.tsxcomponents/sections/StatesVideoTitle.tsxcomponents/sections/OpeningStatement.tsxcomponents/sections/StatBar.tsxcomponents/sections/SectionGrid.tsxcomponents/sections/WhyAmericaSection.tsxcomponents/sections/MapPreviewSection.tsxcomponents/sections/VideoSection.tsxcomponents/sections/DataTeaserSection.tsxcomponents/sections/QuoteCarousel.tsxcomponents/sections/GalleryPreviewSection.tsxcomponents/sections/NewsletterSection.tsx
Support utilities mounted globally in the layout:
- reading progress bar
- back-to-top button
- language provider
- analytics and speed insights
The homepage hero is more custom than the rest of the landing page.
HeroSection.tsxowns the image carousel, particle canvas, parallax motion, CTA row, and title stackStatesVideoTitle.tsxrenders the middleSTATESline as a masked flag-video treatment- the top and bottom title lines remain regular DOM text
- if you need to change hero media, start with
lib/constants.ts,lib/site-images.ts, andpublic/videos/
This repo does not use a formal feature-flag service right now, but it is still easy to stage work:
- scaffold a route page and leave TODO zones in place
- wire the route into navigation early if useful
- keep facts in data files so unfinished sections do not contaminate shared components
- keep visual experiments isolated in their own section component
This repo is optimized so you can manage images without hunting through JSX.
Do not scatter raw image paths across the app unless there is a good reason.
Use this flow:
- add the file somewhere in
IMAGES/ - import it in
lib/site-images.ts - expose it as a stable
SITE_IMAGES.someKey - consume that key from data files or components
lib/constants.tsfor nav cards and hero slideshowlib/data/home.tsfor homepage contentlib/data/economy-data.tsfor economy pages
If you want to change a homepage hero image:
- add the new file to
IMAGES/ - import it in
lib/site-images.ts - replace the hero key in
lib/constants.ts
- easier swaps
- fewer broken references
- easier reuse across sections
- less chance of Vercel/Linux case-sensitivity failures
- one obvious place to audit what the live site is using
Most factual content is intentionally stored in data files.
Main content sources:
lib/data/home.tslib/data/economy-data.tslib/data/nature-data.tslib/constants.ts
Use these rules:
- change facts and stats in data files
- change section order in page files
- change visual layout in component files
- change images via
SITE_IMAGES
- use data files for numbers, lists, cards, and repeated text
- keep page files focused on structure
- keep shared visuals inside components
- keep filenames stable once the site depends on them
The site currently supports:
- English
- Romanian
Core files:
lib/i18n/config.tscomponents/providers/LanguageProvider.tsxlib/i18n/server.ts
How it works:
- client components use the language provider
- server pages read the locale from a cookie
- the header language selector writes both local storage and cookie state
If you add a new route and want it translated:
- read the locale with
getServerLocale()in the page - create a
copyobject inside the page or data getter - render translated labels from that object
- client surfaces like the header use the language provider
- server routes use cookie-based locale reads
- shared datasets can expose localized getters
- Romanian is treated as a first-class display mode, not a mock toggle
Layout:
components/layout/Header.tsxcomponents/layout/Footer.tsxcomponents/layout/Breadcrumb.tsxcomponents/layout/PageChrome.tsx
Content:
components/sections/FactCard.tsxcomponents/sections/StatCard.tsxcomponents/sections/QuoteBlock.tsxcomponents/sections/ParallaxSection.tsxcomponents/sections/AccordionSection.tsx
Charts:
components/data/GdpBarChart.tsxcomponents/data/SP500Chart.tsxcomponents/data/VCCharts.tsxcomponents/data/DollarMarketCharts.tsxcomponents/data/NatureCharts.tsx
Nature-specific visuals:
components/nature/NatureAnimations.tsx
This is the practical operator section.
Edit app/page.tsx
Edit lib/constants.ts
Edit lib/data/home.ts
Edit lib/data/economy-data.ts
Edit lib/data/nature-data.ts
Edit lib/constants.ts
Edit lib/i18n/config.ts
Edit app/globals.css
Start with:
components/sections/StatesVideoTitle.tsxcomponents/sections/HeroSection.tsxpublic/videos/flag-loop.mp4
The visual language of the repo is built around:
glory-redglory-blueglory-gold- deep navy backgrounds
- editorial typography
- image-heavy sections with gold accents and patriotic gradients
This is not a neutral design system. If you add new sections, preserve the established tone:
- high contrast
- strong imagery
- premium editorial layout
- patriotic palette
- minimal generic placeholder UI
If a new section looks like a generic SaaS block, it is probably wrong for this repo.
This section is for future AI-assisted edits. The goal is to explain how the codebase is intended to work so automated changes preserve the current architecture and visual standard.
- pages should mostly assemble data and reusable components
- facts, stats, quotes, and repeated cards should live in
lib/data/* - shared imagery should be registered through
lib/site-images.ts - locale handling should happen near the top of a page or inside localized data getters
- interactive or animated behavior should live in focused client components, not be spread through server page files
- Next.js App Router is used so pages can stay server-first while interactive sections remain client islands
- the repo is organized by editorial verticals such as
economyandnature, not by generic marketing-page slices - data files exist to keep factual content maintainable and to stop large pages from turning into copy dumps
- image indirection through
SITE_IMAGESreduces broken-path bugs and makes media swaps predictable - analytics and Speed Insights are mounted once in
app/layout.tsxso observability stays global and consistent
- the site is intentionally cinematic, not neutral
- strong imagery, patriotic color, editorial spacing, and motion are part of the product identity
- charts and stat walls should feel integrated into the narrative, not like dashboard leftovers
- if a new section looks like a generic SaaS feature grid, it is probably off-brand
- the homepage is a story sequence, not a standard hero-plus-features template
HeroSection.tsxis intentionally dense because it owns a custom visual system: slideshow, particles, parallax, and title treatmentStatesVideoTitle.tsxexists because the middle hero line needed a more art-directed effect than plain text could provide- homepage sections are broken into separate components so visual experiments stay isolated
app/economy/page.tsxandapp/nature/page.tsxare the two most complete editorial hubs in the repo- both use the same general pattern: hero -> stats -> overview -> charts/tables/media -> fact cards -> quote -> next routes
- deep-dive subpages are meant to be substantive long-form pages, not thin SEO pages
- new verticals should follow this pattern instead of shipping one shallow landing page
- prefer updating data files before adding more hardcoded strings to JSX
- preserve bilingual behavior whenever visible copy changes
- preserve the art-directed visual tone instead of simplifying into generic layouts
- prefer reusable components over inflating already large page files
- when touching imagery, update
SITE_IMAGESrather than scattering raw imports - run
npm run type-checkafter changes
| Task | First place to inspect |
|---|---|
| Homepage copy or card content | lib/data/home.ts |
| Homepage hero behavior | components/sections/HeroSection.tsx |
STATES title effect |
components/sections/StatesVideoTitle.tsx |
| Economy content | lib/data/economy-data.ts |
| Nature content | lib/data/nature-data.ts |
| Image swaps | lib/site-images.ts |
| Locale logic | components/providers/LanguageProvider.tsx, lib/i18n/server.ts |
| Global shell and analytics | app/layout.tsx |
The project is designed for Vercel.
Standard flow:
npm run type-check
npm run buildThen push to GitHub and deploy through Vercel.
If Vercel fails on static image imports:
- check the exact filename casing in
lib/site-images.ts - remember macOS may hide case mistakes that Linux CI will reject
npm run type-checkpasses- local image paths match real file names exactly
- new routes are linked intentionally
- translated routes still render without client-only assumptions
- no content was hardcoded into JSX if it belongs in
lib/data/*
- keep file names stable once referenced in
SITE_IMAGES - prefer editing data files over hardcoding copy in JSX
- prefer adding new sections as components instead of bloating page files
- run
npm run type-checkbefore pushing - if a local image changes, hard refresh the browser because Next/Image caching can make swaps look delayed
- rotating multi-image homepage hero
- homepage data teaser charts with USA-highlighted bars
- animated mega-menu with mobile overlay
- breadcrumb JSON-LD support
- reading progress bar + floating back-to-top button
- local image library instead of scattered remote URLs
- Romanian translation mode wired through real cookie + provider state
- economy section built as a real editorial/data hybrid, not just cards and charts
- nature section built with its own charts, animations, and long-form subpages
- homepage hero includes a custom video-backed
STATEStitle treatment
Good next expansions for this repo:
- finish the culture hub with real content blocks and media
- turn quality-of-life from scaffold to full narrative section
- deepen the explorer and gallery experiences
- tighten per-route metadata and translated SEO copy
- expand the Romanian coverage to every remaining visible string
- continue improving the README as the repo gets more opinionated
| Area | Status |
|---|---|
| Homepage | strong and feature-rich |
| Economy | substantial and already production-shaped |
| Nature | substantial and already production-shaped |
| Culture | scaffolded, ready for content |
| Quality of Life | scaffolded, ready for content |
| Translation | live for shared UI and major route content |
| Image system | centralized and local-first |
| README | aligned with the actual repo |
Built as a patriotic editorial web experience, not a template.
Keep the bar high. Use real images, real statistics, and intentional layouts.