The official marketing website for Armbian Imager, the open-source tool that flashes Armbian OS to single-board computers.
Visit the live site →
A single-page, responsive website built with Next.js 16, Tailwind CSS v4, and Framer Motion. It showcases Armbian Imager's features, walks users through the flashing process, provides platform downloads (fetched live from GitHub Releases), and highlights community testimonials. Includes a live interactive mockup of the Armbian Imager app and real-time service status monitoring.
| Section | Description |
|---|---|
| Navbar | Sticky navigation with scroll-aware active section highlighting and dark/light toggle |
| Hero | Headline, CTAs, live GitHub stars counter, and animated app mockup (desktop) |
| Features | Six feature cards with hover effects (300+ boards, verification, 18 languages, caching, auto-updates, cross-platform) |
| How It Works | Five-step visual walkthrough with scroll-triggered animations |
| Downloads | Platform-specific downloads fetched live from the latest GitHub Release with loading skeletons |
| Testimonials | Community and press quotes from YouTubers, journalists, and developers |
| Community | Forum, GitHub, IRC links and contribution CTA |
| Footer | Social links (GitHub, Forum, Discord), project links, service status indicator |
- Node.js 18+ (LTS recommended)
- npm 9+
npm install
npm run devOpen http://localhost:3000.
├── app/
│ ├── layout.tsx # Root layout, metadata, JSON-LD structured data
│ ├── page.tsx # Main landing page
│ ├── not-found.tsx # Custom 404 page
│ ├── globals.css # Tailwind CSS v4 imports and custom styles
│ ├── robots.ts # robots.txt generation
│ └── sitemap.ts # sitemap.xml generation
├── sections/ # Page sections (hero, features, downloads, etc.)
├── components/
│ ├── app-mockup/ # Interactive Armbian Imager mockup (9 modules)
│ │ ├── index.tsx # Main orchestration (state, effects, layout)
│ │ ├── types.ts # Shared TypeScript types
│ │ ├── constants.ts # CDN URLs, colors, badges, flash stages
│ │ ├── theme.ts # Dark/light theme context
│ │ ├── data.ts # API data processing and selection logic
│ │ ├── home-cards.tsx # Step pills and selection cards
│ │ ├── modals.tsx # Manufacturer/board/OS/storage/confirm modals
│ │ ├── flash-views.tsx # Flash progress, completion views
│ │ └── image-components.tsx # Board and vendor image components
│ ├── icons/ # Custom SVG icons (Discord)
│ ├── ui/ # shadcn/ui primitives (button, skeleton)
│ ├── ambient-glow.tsx # Reusable ambient background glow effect
│ ├── hover-card.tsx # Polymorphic hover card (div or anchor)
│ ├── motion-wrapper.tsx # Scroll-triggered animation wrapper
│ ├── scroll-link.tsx # Smooth scroll navigation link
│ ├── section-heading.tsx # Consistent section title component
│ ├── section-observer.tsx # Intersection Observer for active section
│ ├── service-status.tsx # Live service status indicator
│ └── theme-toggle.tsx # Dark/light mode toggle
├── content/ # All copy and data — no hardcoded strings
├── lib/ # Utilities and animation variants
├── providers/ # React context providers (theme, active section)
├── public/assets/ # Static images and logos
├── server.js # Custom standalone server for cPanel/Docker
├── next.config.ts # Next.js configuration (standalone output)
├── postcss.config.mjs # PostCSS / Tailwind
└── components.json # shadcn/ui configuration
All text and data lives in content/. Edit the relevant file — no component changes needed.
| File | Controls |
|---|---|
content/site.ts |
Page title, meta description, canonical URL |
content/navigation.ts |
Navbar links |
content/hero.ts |
Hero title, subtitle, CTA buttons |
content/features.ts |
Feature cards (6 items) |
content/steps.ts |
"How It Works" steps (5 items) |
content/downloads.ts |
Platform definitions, GitHub Release API URL, asset mapping |
content/testimonials.ts |
Community and press quotes |
content/community.ts |
Community links and contribution ways |
content/footer.ts |
Footer link columns, social links, license, copyright |
content/types.ts |
Shared TypeScript interfaces for all content |
The interactive mockup in the hero section (components/app-mockup/) is a fully animated recreation of the Armbian Imager desktop app. It:
- Fetches real board and OS data from the Armbian API
- Auto-advances through the full workflow (select manufacturer → board → OS → storage → flash → done)
- Cycles through different boards on each loop
- Respects
prefers-reduced-motion(hidden when enabled) - Only renders on
lg:screens (hidden on mobile/tablet)
npm run buildProduces a standalone output in .next/standalone/.
npm run deploy:prepareThis builds the project and copies all required assets into .next/standalone/. Upload that directory to your server and start it with:
NODE_ENV=production node server.js- Setup Node.js App in cPanel
- Set Node.js version to 18+, mode to Production, startup file to
server.js - Set
NODE_ENV=production - Start the application
Make sure
.next/static/andpublic/are inside the standalone directory. Thedeploy:preparescript handles this automatically.
| Command | Description |
|---|---|
npm run dev |
Start dev server (Turbopack) |
npm run build |
Production build |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run format |
Format with Prettier |
npm run format:check |
Check formatting |
npm run deploy:prepare |
Build + assemble standalone directory |
- Next.js 16 — App Router, TypeScript, Turbopack, standalone output
- Tailwind CSS v4 — CSS-first configuration
- shadcn/ui — Accessible component primitives
- Framer Motion — Viewport-triggered and layout animations
- next-themes — Dark / light mode
- Lucide — Icon library
- Vercel Analytics + Speed Insights — Performance monitoring
GPL-2.0 — see LICENSE for details.