Diwa-Habi

Diwa Habi

A complete, responsive storefront for a contemporary Philippine clothing brand. Built with React, TypeScript, Vite, Tailwind CSS, and a small custom design system.

Included

• Editorial home page, collection, product detail, brand story, lookbook, size guide, contact, FAQ, privacy, and terms pages
• Search, category navigation, sorting, color/size filters, loading and empty states
• Persistent wishlist, working cart drawer, quantity controls, validated newsletter and contact forms
• Responsive mobile navigation, accessible controls, SEO page titles and descriptions, and reduced-motion support
• Original AI-generated campaign imagery stored locally in public/images

Run locally

npm install
npm run dev

Vite will print the local development URL, typically http://localhost:5173.

Production build

npm run build
npm run preview

Quality checks

npm run lint
npm run build

Project structure

• src/components — shared navigation, footer, product cards, UI states
• src/context — cart and wishlist state
• src/data — realistic sample catalog data in Philippine pesos
• src/hooks — per-page SEO metadata helper
• src/pages — all route-level pages
• public/images — local campaign and catalog imagery

Notes

This is a polished front-end demo. Checkout, contact, and newsletter actions use local UI success states and are ready to connect to a commerce or form backend. Product data is currently local and can be replaced with a CMS or commerce API without changing the UI architecture.