docs/docs/specs/patterns/MARKETING.md

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