Eyeconic is a premium, production-ready template for sunglasses labels, optical stores, independent opticians, eyewear boutiques, lens brands, and curated fashion-accessory shops. Built on Next.js 16, React 19, and TypeScript, it ships with 16 page templates covering 40 prerendered routes, nine product pages with colour and size selection, four category pages, a working cart and a full checkout, a fourteen-article blog with category filtering, and a fully editable content layer — no CMS or backend required.

People buy glasses with their face in mind, which makes eyewear one of the hardest things to sell from a photograph. Eyeconic is styled with a hand-crafted CSS design system (no utility-framework lock-in) in a black, bone and citrus-yellow palette, with Inter Tight headlines set against Inter and scroll-linked motion applied with restraint — so every page keeps attention on the frames rather than on the interface. Content lives in MDX and JSON files you edit in any text editor, so you can launch in hours.

Live demo: https://eyeconic-nextjs.vercel.app

Tech Stack

• Next.js 16 — App Router, server components, all 40 routes prerendered to static HTML
• React 19 — latest features; interactivity isolated to one script layer plus the cart
• TypeScript — strict mode, fully typed
• MDX content — nine frames and fourteen articles as .mdx files (frontmatter parsed with gray-matter), served by [slug] dynamic routes
• Hand-crafted CSS design system — colours, type scale, and spacing as CSS custom-property tokens in one :root block; re-theme everything in one place
• Self-hosted fonts — Inter and Inter Tight served locally, no third-party font CDN
• No animation library — scroll reveals, image zooms, overlay wipes, the rolling mobile menu, the mega menu, tab strips, three carousels, the scroll-linked photograph, marquees and the video lightbox in one TypeScript file, no GSAP and no jQuery
• Client-side storefront — cart and order state in localStorage, no database, no vendor SDK

Included Pages and Templates

• Home — a scroll-driven story: the hero with its rolling product list and video lightbox, the review marquee, the collection carousel, the brand vision panel, the scroll-linked photography, animated shop statistics, the three-up product row, the customer review slider and the editorial gallery
• Shop — the full range under a keyboard-navigable category strip, with a working sort by name, price and date
• Product — 9 detail pages with the full-bleed photograph, colour swatches that repaint it, size selection, add-to-cart, and a related-frames row
• Category — 4 pages for Man, Woman, Kids and Accessories, each with its own head metadata
• About — the brand story, the founding panel, the values grid, the video lightbox and the editorial gallery
• Blog — a directory leading with a feature article, then four category tabs over thirteen more, plus 14 article pages with a hero, author block, pull quote, figure and a share row
• Storefront — a cart drawer in the navigation bar, checkout, a PayPal checkout variant, and an order confirmation page
• Contact — enquiry form and store details
• Utility — Style Guide, Changelog, Licenses, 401 (password protected), 404

16 page templates, 40 prerendered routes.

Easy Content Editing

No CMS needed — content lives in editable files you can change in any text editor:

• Frames — src/content/products/*.mdx. Frontmatter carries the name, the listing and detail prices, the colourways with the photograph each one swaps in, the sizes, and the three sort fields the shop grid reads. The body holds the description paragraph.
• Articles — src/content/blog/*.mdx. Frontmatter carries the title, summary, author and portrait, date, reading time and photograph.
• Writing a body — plain prose, not markdown: paragraphs, ## headings, - list items, > pull quotes and ![](path) figures. The page component puts each one inside the design's own markup, so the words are yours and the layout stays exactly as designed. No special syntax to learn.
• Categories — src/content/categories.json. The four shop categories and their head metadata.
• Listing order — src/content/collections.json records what a per-item file cannot state: the frames the hero rolls through, the ones the collection carousel runs, the three in the home page's three-up row, which frames sit under each of the shop's five tabs, which article the blog leads with, the four category tabs beneath it, and the catalogue order the related row draws from.
• Images — src/content/images.json carries each picture's responsive srcset, so naming an image is enough and the sizes follow.
• Theme — brand colours, fonts, type scale, and spacing are CSS custom properties at the top of public/assets/css/styles.css — change them once to re-skin the whole site.
• Navigation, footer and cards — shared components edited once in src/components/.

Performance and SEO

• Static-rendered pages out of the box (App Router) — all 40 routes prerendered, including every product and article page
• Lazy-loaded imagery throughout, WebP and AVIF artwork with responsive srcsets
• Self-hosted fonts — no third-party CDN requests at runtime
• The video lightbox loads nothing until a visitor opens it, so no page pays for an embedded player it never shows
• Per-page titles and metadata via the Next.js Metadata API (generateMetadata on dynamic routes), with Open Graph and Twitter cards
• Semantic HTML structure, a single H1 per page, a route-aware active navigation state, and clean, crawlable URLs
• Keyboard-navigable menus, tabs and colour swatches with roving focus and arrow keys, and every animation respects the reduced motion setting

Deployment

One-click deploy to Vercel — build settings are auto-detected. Also runs on Netlify, AWS Amplify, Cloudflare Pages, or any Node 20+ host.

What You Get

• Full Next.js 16 + TypeScript source code
• 16 page templates covering 40 prerendered routes
• Content collections: 9 frames and 14 articles as MDX, plus the categories, listing order and image sizes as JSON
• A working cart and checkout flow, ready to point at your payment provider
• Self-contained HTML documentation
• Comprehensive README with setup and editing guide
• Friendly buyer support

Requirements

• Node.js 20 or higher
• Basic familiarity with the command line
• A text editor (VS Code recommended)