# MorphForge — 20 Snake Breeding Website Mock Designs

**Project:** 20 high-fidelity, production-ready HTML/CSS mockups for a premium snake/reptile morph marketplace inspired by MorphMarket, MorphBreeders, and elite reptile communities.

**Brand:** MorphForge
- Tagline: "Exceptional genetics. Trusted breeders. Curated collections."
- Focus: Ball Pythons, Boas, Colubrids. Advanced morphs, genetic tools, breeder storefronts, auctions.

## Design Inspirations Used
- Stripe (premium light, elegant)
- Linear (dark precise SaaS)
- Vercel (monochrome developer minimal)
- Pinterest (masonry visual discovery)
- Airbnb (warm photography-driven)
- Notion (clean editorial)
- Figma (playful vibrant)
- Airtable (data-dense tables)
- Apple (premium product)
- And hybrids / custom

## How to View
Open any `NN-name.html` directly in a browser. All are self-contained single-file pages (Tailwind CDN + custom CSS). Fully responsive.

## Structure of the 20 Mocks

| # | File | Type | Style Inspiration | Key Focus |
|---|------|------|-------------------|-----------|
| 01 | 01-home-stripe.html | Homepage | Stripe | Clean hero, featured morphs, trust bar |
| 02 | 02-market-linear.html | Marketplace | Linear | Dark grid, advanced filters, live counts |
| 03 | 03-listings-vercel.html | Listings | Vercel | Monochrome, shadow borders, precise |
| 04 | 04-discovery-pinterest.html | Discovery | Pinterest | Masonry photo grid, inspiration feel |
| 05 | 05-breeder-stripe.html | Breeder Store | Stripe | Premium storefront with inventory |
| 06 | 06-detail-linear.html | Animal Detail | Linear | Dark detail page, genetics panel |
| 07 | 07-calculator-vercel.html | Genetic Calculator | Vercel | Interactive tool, clean data |
| 08 | 08-profile-airbnb.html | Breeder Profile | Airbnb | Warm photo story + listings |
| 09 | 09-auctions-linear.html | Auctions | Linear | Dark bidding interface |
| 10 | 10-home-pinterest.html | Homepage | Pinterest | Hero + dense visual feed |
| 11 | 11-dashboard-airtable.html | Breeder Dashboard | Airtable | Data table, inventory management |
| 12 | 12-product-apple.html | Detail | Apple | Ultra-premium product page |
| 13 | 13-filters-notion.html | Marketplace | Notion | Editorial filters + clean cards |
| 14 | 14-playful-figma.html | Explorer | Figma | Colorful morph visualizer |
| 15 | 15-compact-supabase.html | Listings Table | Supabase | Dense table + quick filters |
| 16 | 16-mobile-linear.html | Mobile View | Linear | Responsive mobile marketplace |
| 17 | 17-hybrid-stripe-linear.html | Homepage | Stripe + Linear | Premium dark/light hybrid |
| 18 | 18-breeder-tools.html | Tools Hub | Vercel | Calculators + resources |
| 19 | 19-full-market-vercel.html | Full Marketplace | Vercel | Large catalog with sidebar |
| 20 | 20-landing-premium.html | Landing + Onboarding | Stripe | Conversion-focused landing |
| 21 | 21-full-interactive-morphforge.html | Full App Demo | Linear (dark) | Complete interactive experience |
| 22 | **22-enhanced-full-interactive.html** | **Enhanced Full Demo** | Linear (dark) | 20+ listings + advanced genetics (3-gene) + full seller inventory tools |
| 23 | **23-stripe-full-interactive.html** | **Stripe Light Full App** | Stripe (light premium) | Complete interactive experience in clean Stripe aesthetic |

## The Full Interactive Version (Recommended)
**`21-full-interactive-morphforge.html`** is a complete, production-feeling single-file demo of the entire MorphForge platform:

### Features
- **Marketplace**: Real-time filtering (species, morph chips, price range, global search, sort). 10 realistic listings.
- **Listing Cards**: Click any card → beautiful detail modal with genetics, breeder info, actions.
- **Auctions**: Live bidding interface. Click "Place Bid" — prices and bid counts update instantly. "Simulate Live Bid" button for demo.
- **Genetic Calculator**: Fully functional. Pick genes for both parents → calculates plausible offspring probabilities.
- **Watchlist**: Heart icon in header. Add from detail modals. Persisted in localStorage. View/remove items.
- **Breeders**: Clickable breeder cards → profile modal.
- **Seller Dashboard**: Click your avatar (Apex Reptiles) → see stats + current listings. Includes a working "List new animal" flow.
- **Toasts + Feedback**: Every action gives immediate visual feedback.
- **Keyboard shortcut**: Press `/` to focus global search.

All interactions are 100% client-side (no backend). Open the file directly in any browser.

## All files include:
- Realistic snake morph data (ball pythons, boas, corn snakes)
- Responsive design
- High-quality image placeholders
- Clean, modern design system inspired by real platforms

Generated by Hermes Agent (web-designer profile) using real MorphMarket research.