Ciseco: a complete storefront, not a landing page
Ciseco is a shop front end with the parts a real store needs: 25 routes that run from the home page through a product, into a bag, out through checkout and into an order history the customer can come back to. It is built for anyone selling physical goods who wants a front end that is finished before they start.
Product pages and collection pages each ship in two designs, so you can pick the one that suits your catalogue and delete the other, or keep both and let different departments look different.
The demo behaves like a shop while a visitor moves through it. The bag adds up, with free shipping over a threshold, flat shipping below it, tax and a discount code. Checkout places an order and opens it. A heart saves a product to a wishlist. The currency menu reprices the shop. Filters, sort, paging and search live in the address, so a narrowed list can be linked to and the Back button steps through it. A review you write posts to the page and recounts the rating. All of it runs in the browser with no backend, and a reload starts the demo over.
AI ready
The Next.js version is built to be edited with a coding agent, and the files that make that work are in the download.
- DESIGN.md holds the design language: the colour, type and radius values, and twelve sections of rules for using them. An agent reads it before it touches anything a visitor sees.
- AGENTS.md is the short guide for any coding agent: what to set before deploying, the conventions a plausible edit breaks first, and where the demo data and its state live. A one-line CLAUDE.md beside it points Claude Code at the same file.
- build-page is an agent skill for a new page or section in this design language.
- restyle is an agent skill for the brand colour, the fonts, the corners and the motion.
- review-design is an agent skill that checks a change against DESIGN.md, section by section.
The HTML version carries its own AGENTS.md, which explains how its pages, partials, scripts and data fit together and which rules a plausible edit breaks.
Two versions, one download
The template folder is the Next.js version, built on the stack listed below. The html folder is the same 25 pages as plain HTML5, styled with Tailwind CSS 4.3, made interactive with Alpine.js 3.17 and built with Vite 7. The HTML pages were captured from the Next.js build, so the markup, copy and look match.
The finished site sits in the html folder’s dist directory and opens from a folder with no server. Editing it needs Node.js 20.19 or newer. Fourteen shared partials write the header, the footer and the panels into every page. Six pages are samples of pages that change with what they show: a collection, a product, a blog post and an order, and the second designs of the collection and product pages. Every card and link that leads to one of those opens its sample, so the sample is the page to restyle.
The download carries a guide to each version, one for template and one for html.
Every page in the package
- Home: hero carousel, collection rows, product sliders, a testimonial rail and blog teasers.
- Home 2: a second arrangement of the same sections.
- Collection: listing with a filter rail, sort menu and pagination.
- Collection, second design: the same listing with a sidebar filter panel.
- Product: gallery with a lightbox, colour and size variants, quantity stepper, size chart, customer reviews and a specification accordion.
- Product, second design: the same product with a stacked gallery.
- Search: results with the full filter rail and a match count.
- Cart: bag with quantity stepper, a discount field and a running summary.
- Checkout: contact, shipping and payment steps beside an order summary.
- Order successful: confirmation of the order just placed.
- Orders and Order detail: history and a single order.
- Account: profile, with billing, password and wishlist pages.
- Blog and Article: index and post, with author and related reading.
- About: story, founders and figures.
- Contact: details and a form.
- Sign in, Sign up, Forgot password.
- Subscription: membership tiers.
- Coming soon: holding page with a countdown.
What is built in
- Four panels that open over any page, one at a time: a search drawer that suggests up to five products as you type, a bag drawer, a mobile navigation drawer and a product quick view.
- A filter rail with categories, colours, sizes and a price range slider, plus a sort menu, pagination and a tabbed department filter on the home grid.
- Product variants with colour swatches and a size chart.
- Customer reviews with star ratings and a review form that posts and recounts.
- A wishlist: a heart on every card and product page, and a saved-items page in the account area.
- A bag with quantity steppers, removal, a discount code and free-shipping logic, and a three-step checkout that places an order.
- A currency and language menu that reprices every price in the shop.
- A mega menu, a two-level mobile navigation and a footer with four link columns.
- A light and a dark half, written on every component, with a sun-and-moon switch in the account menu and the footer. The choice is remembered and a reload never flashes the light page first.
- A visible focus ring for keyboard users, a not-found page for an address the data does not hold, and a social preview image for every product, collection and post.
- A confirmation on every form, so nothing is a dead button.
Under it
- Next.js 16.3 with the App Router, React 19.3 and TypeScript 5.9.
- Tailwind CSS v4, CSS-first. The theme is in one stylesheet and there is no tailwind.config.js to hunt through.
- Headless UI 2.2 for the menus, dialogs and drawers, so keyboard and screen reader behaviour is handled.
- Poppins and Google Sans Flex, both open source, both self-hosted at build time. No runtime CDN request for type.
- Sitemap, robots, canonical URLs, Open Graph tags and product structured data, all built from one environment variable.
- An npm check script that builds, type-checks, lints and then reads every built page for links that lead nowhere.
- 119 components and 195 TypeScript files, written to be read.
What is not included
There is no backend. This is a front end. The bag, checkout, wishlist, reviews, forms and filters respond on screen and send nothing anywhere. Their state lives in the browser’s memory and a reload starts the demo over. Every product, order and blog post is a plain object in one file, src/data/data.ts, which is where you point the template at your own source.
Eleven photographs load from a remote host. The About page, the blog post page and the demo data reference images by URL from Unsplash and Pexels. They are not covered by your purchase and they need replacing before you launch. The rest of the photography ships inside the package and is licensed to the author for the demo, so it needs replacing too.
No payment provider is wired. The checkout collects and confirms; connecting Stripe or anything else is your work.
The HTML version keeps less state than the Next.js version. Its bag, hearts, currency menu and posted reviews answer on their page and keep nothing, so the next page opens as drawn. Its quick views and product links open the sample product, its search suggests from the products written into the header, and prices print in dollars whatever currency is picked. The guide to the HTML version lists each difference. It ships no sitemap or robots file, and its photography is linked from other sites, so it needs replacing as well.