# Marketing Patterns (Tailwind+)

Consolidated list of all marketing patterns from Tailwind+ to convert to Flux UI.

**Total: 179 variants across 23 categories**

Source: https://tailwindcss.com/plus/ui-blocks/marketing/

---

## Page Sections

### Hero Sections (12 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/heroes

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple centered | Centered text + CTA |
| 2 | With app screenshot | Product image below |
| 3 | With phone mockup | Mobile device frame |
| 4 | Split with image | Text + image side-by-side |
| 5 | Split with screenshot | Text + screenshot split |
| 6 | With angled image on right | Diagonal image crop |
| 7 | With image tiles | Multiple images grid |
| 8 | With video background | Video autoplay background |
| 9 | Dark with gradient | Dark theme + gradient |
| 10 | Simple centered on dark | Dark centered hero |
| 11 | Split with image on dark | Dark split layout |
| 12 | With app screenshot on dark | Dark with screenshot |

---

### Feature Sections (15 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/feature-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple three column | 3-column icon grid |
| 2 | Offset grid | Staggered feature grid |
| 3 | Centered grid | Centered 3-column |
| 4 | With large screenshot | Screenshot + features |
| 5 | Simple two column | 2-column layout |
| 6 | With code panel | Code example display |
| 7 | With product screenshot | Product-focused |
| 8 | With product screenshot on left | Left-aligned product |
| 9 | With feature list | List-style features |
| 10 | Simple | Basic feature section |
| 11 | Simple two column on dark | Dark 2-column |
| 12 | Centered grid on dark | Dark centered grid |
| 13 | With large screenshot on dark | Dark with screenshot |
| 14 | With product screenshot on dark | Dark product |
| 15 | Simple on dark | Dark simple features |

---

### CTA Sections (11 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/cta-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple centered | Centered CTA box |
| 2 | Simple stacked | Stacked text + button |
| 3 | Simple justified | Justified layout |
| 4 | With image tiles | Image grid CTA |
| 5 | With app screenshot | Screenshot CTA |
| 6 | Brand panel with app screenshot | Branded panel |
| 7 | Brand panel | Solid brand color |
| 8 | Split with image | Image + CTA split |
| 9 | Simple centered on dark | Dark centered |
| 10 | Simple stacked on dark | Dark stacked |
| 11 | Simple justified on dark | Dark justified |

---

### Bento Grids (3 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/bento-grids

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Three column bento grid | 3-column grid |
| 2 | Two row bento grid | 2-row layout |
| 3 | Bento grid on dark | Dark theme grid |

---

### Pricing Sections (12 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/pricing

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Three tiers | Standard 3-plan layout |
| 2 | Two tiers | Simple 2-plan |
| 3 | Three tiers with dividers | Divided pricing |
| 4 | Three tiers with emphasized tier | Featured plan |
| 5 | Single price with details | Single product |
| 6 | With comparison | Feature comparison table |
| 7 | Single price with feature list | Single + features |
| 8 | Three tiers on dark | Dark 3-tier |
| 9 | Two tiers on dark | Dark 2-tier |
| 10 | Three tiers with emphasized tier on dark | Dark featured |
| 11 | With comparison on dark | Dark comparison |
| 12 | Single price with feature list on dark | Dark single |

---

### Header Sections (8 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/header

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic page header |
| 2 | Centered | Centered header |
| 3 | With eyebrow | Eyebrow text + title |
| 4 | With action | Header + button |
| 5 | Simple on dark | Dark simple |
| 6 | Centered on dark | Dark centered |
| 7 | With eyebrow on dark | Dark with eyebrow |
| 8 | With action on dark | Dark with action |

---

### Newsletter Sections (6 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/newsletter-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple stacked | Stacked form |
| 2 | Simple side-by-side | Inline form |
| 3 | With description | Text + form |
| 4 | Centered card with graphics | Decorative card |
| 5 | Simple stacked on dark | Dark stacked |
| 6 | Simple side-by-side on dark | Dark inline |

---

### Stats Sections (8 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/stats-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic stats row |
| 2 | Split with image | Stats + image |
| 3 | Simple grid | Stats grid layout |
| 4 | With background image | Image backdrop |
| 5 | Simple on dark | Dark simple |
| 6 | Split with image on dark | Dark split |
| 7 | Simple grid on dark | Dark grid |
| 8 | With background image on dark | Dark backdrop |

---

### Testimonials (8 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/testimonials

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple centered | Single centered quote |
| 2 | With large avatar | Large profile image |
| 3 | Side-by-side | Multiple quotes inline |
| 4 | With overlapping image | Layered images |
| 5 | Off-white grid | Grid on off-white |
| 6 | Simple centered on dark | Dark centered |
| 7 | Side-by-side on dark | Dark side-by-side |
| 8 | With overlapping image on dark | Dark layered |

---

### Blog Sections (7 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/blog-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Three column with images | 3-column image cards |
| 2 | Three column simple | 3-column text cards |
| 3 | Single column | Vertical list |
| 4 | With featured post | Featured + grid |
| 5 | Three column with images on dark | Dark image cards |
| 6 | Three column simple on dark | Dark text cards |
| 7 | Single column on dark | Dark single column |

---

### Contact Sections (7 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/contact-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple two column | Form + info split |
| 2 | Centered | Centered form |
| 3 | Split with pattern | Form + decorative |
| 4 | Split two-tone | Two-color split |
| 5 | Side-by-side grid | Grid layout |
| 6 | Simple two column on dark | Dark two-column |
| 7 | Centered on dark | Dark centered |

---

### Team Sections (9 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/team-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With small images | Compact avatars |
| 2 | With large images | Large profile photos |
| 3 | Simple list | Text-based list |
| 4 | Grid with round images | Circular avatars grid |
| 5 | Grid with large round images | Large circular grid |
| 6 | With small images on dark | Dark small images |
| 7 | With large images on dark | Dark large images |
| 8 | Simple list on dark | Dark text list |
| 9 | Grid with large round images on dark | Dark circular grid |

---

### Content Sections (7 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/content-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Two columns with image | Text + image |
| 2 | Centered | Centered prose |
| 3 | Split with image | Image split |
| 4 | Single column | Simple prose |
| 5 | Centered on dark | Dark centered |
| 6 | Split with image on dark | Dark split |
| 7 | Single column on dark | Dark single |

---

### Logo Clouds (6 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/logo-clouds

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic logo row |
| 2 | Simple with heading | Title + logos |
| 3 | Split with grid | Split layout grid |
| 4 | Simple on dark | Dark logo row |
| 5 | Simple with heading on dark | Dark with heading |
| 6 | Split with grid on dark | Dark split grid |

---

### FAQs (7 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/faq-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Two columns | 2-column Q&A |
| 2 | Centered accordion | Expandable centered |
| 3 | Side-by-side | Question + answer split |
| 4 | Offset with supporting text | Offset layout |
| 5 | Two columns on dark | Dark 2-column |
| 6 | Centered accordion on dark | Dark accordion |
| 7 | Side-by-side on dark | Dark split |

---

### Footers (7 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/sections/footers

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | 4-column simple | 4-column links |
| 2 | 4-column with newsletter | Links + signup |
| 3 | 4-column with company mission | Links + about |
| 4 | Simple centered | Centered links |
| 5 | 4-column simple on dark | Dark 4-column |
| 6 | 4-column with newsletter on dark | Dark with signup |
| 7 | Simple centered on dark | Dark centered |

---

## Elements

### Headers (11 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/elements/headers

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple with menu button on left | Left hamburger |
| 2 | Simple centered | Centered nav |
| 3 | Simple with menu button | Right hamburger |
| 4 | With centered logo | Logo centered |
| 5 | With left-aligned nav | Left nav links |
| 6 | With icons and search | Icons + search bar |
| 7 | With full-width flyout | Full flyout menu |
| 8 | With stacked flyout | Stacked flyout |
| 9 | With icons | Icon buttons |
| 10 | Simple on dark | Dark simple |
| 11 | With full-width flyout on dark | Dark flyout |

---

### Flyout Menus (7 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/elements/flyout-menus

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic dropdown |
| 2 | Full-width | Edge-to-edge |
| 3 | Full-width two-column | 2-column full |
| 4 | Stacked with footer actions | Stacked + actions |
| 5 | Two column with section images | Images + columns |
| 6 | Full-width two-column with sub-navigation | Complex nav |
| 7 | Full-width with image | Image + links |

---

### Banners (13 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/elements/banners

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With button | CTA button banner |
| 2 | With link | Link banner |
| 3 | On brand | Brand-colored |
| 4 | Privacy notice on brand | Cookie/privacy |
| 5 | With dismiss | Dismissible |
| 6 | Privacy notice with link | Privacy + link |
| 7 | Privacy notice with link on brand | Brand privacy |
| 8 | With button and dismiss | Button + close |
| 9 | Bottom aligned left | Bottom-left |
| 10 | Bottom aligned right | Bottom-right |
| 11 | Bottom aligned full-width | Bottom full |
| 12 | With input | Form input banner |
| 13 | With input floating at bottom | Floating input |

---

## Feedback

### 404 Pages (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/feedback/404-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic 404 message |
| 2 | With suggested pages | Related links |
| 3 | Split with image | Image + message |
| 4 | Simple on dark | Dark 404 |
| 5 | With suggested pages on dark | Dark with links |

---

## Page Examples

### Landing Pages (4 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/page-examples/landing-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With mobile screenshot hero | Mobile mockup hero |
| 2 | Simple hero with background | Background hero |
| 3 | With testimonials and stats | Social proof |
| 4 | With large screenshot hero | Desktop screenshot |

---

### Pricing Pages (3 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/page-examples/pricing-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With comparison table | Full comparison |
| 2 | With three tiers and testimonials | Tiers + quotes |
| 3 | With four tiers | 4-plan layout |

---

### About Pages (3 variants)

Source: https://tailwindcss.com/plus/ui-blocks/marketing/page-examples/about-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With timeline | Company history |
| 2 | Dark with timeline | Dark history |
| 3 | With image grid | Team/office images |

---

## Pattern Categories (for Flux UI organisation)

### By Theme
- **Light**: Default light variants
- **Dark**: Dark theme variants (approximately 50% of patterns)
- **Brand**: Custom brand-colored variants

### By Layout
- **Centered**: Centered content layouts
- **Split**: Two-column splits
- **Grid**: Multi-column grids
- **Stacked**: Vertical stacking

### By Features
- **With images**: Photo/screenshot integration
- **With forms**: Input fields, newsletter signups
- **With icons**: Icon-enhanced sections
- **Dismissible**: Close button included

---

## Conversion Priority

1. **Hero - Simple centered** - landing page essential
2. **Feature Sections - Simple three column** - feature highlights
3. **Pricing - Three tiers** - pricing page standard
4. **CTA - Simple centered** - conversion sections
5. **Headers - Simple with menu button** - navigation
6. **Footers - 4-column simple** - page footer
7. **Testimonials - Simple centered** - social proof
8. **FAQ - Centered accordion** - support content
