# Section Library

## Navigation

### Floating Rounded Menu

Use for premium, creative, tech, and agency sites. Include logo, centered items, CTA button, and frosted glass or soft solid background. Keep it sticky. It may start transparent and become solid on scroll.

### Transparent to Solid Menu

Use over image or video heroes. The solid scroll color must match the site tone.

## Hero

### Video Header

Use for premium service businesses, construction, real estate, venues, events, and visually strong brands. Always use an overlay. Keep text readable and avoid letting the video overpower the message.

### Image With Overlay

Use for corporate, B2B, local services, and client sites without strong video assets. Always test mobile legibility.

### Typographic Hero

Use for creative agencies, portfolios, and premium brands with strong identity. Works best on dark or high-contrast solid backgrounds. Avoid for conservative clients.

### Revolution Slider Style

Use when the client has multiple main messages or services. Keep to 3 or 4 slides, slow autoplay, visible navigation, and a consistent overlay system.

### Gradient With Mockup

Use for tech, SaaS, startups, and digital marketing. Use two brand colors maximum. Let the mockup overlap the next section when it improves depth.

## Content

### Services Grid

Use for 3 to 6 services or features. Card includes icon or image, H3, short paragraph, and optional link. If there are more than 6 services, use tabs.

### Numbered Services

Use for ordered services, method, or process. Make numbers visually prominent. Keep to 5 or 6 items.

### Split Image and Text

Use for detailed benefits. Alternate left-image/right-text and right-image/left-text. Never repeat the same side twice in a row.

### Horizontal Scroll Services

Use for creative or agency sites. Add a visible hint that more cards exist. Ensure mobile behavior is natural.

### Sticky Side Image

Use for premium agencies and portfolios. Keep a tall high-quality image fixed while text scrolls. Provide a simpler mobile layout.

### Tabs

Use for 3 to 5 categories of dense content. Make active state obvious. Avoid more than 5 tabs.

### Portfolio or Case Studies

Use when projects are the proof. Show at least 4 projects. Add filtering when there are more than 8. Use image hover overlays with title and category.

### FAQ Accordion

Use in most conversion pages to reduce objections. Include 6 to 8 questions maximum, strongest objections first, and a subtly different background.

### Asymmetric Blog Grid

Use for editorial sites and content agencies. Combine small cards with one large featured card. The featured card should carry the strongest image.

## Visual Rest

### Parallax Impact Phrase

Use between dense content sections. Include only a short centered phrase over image and overlay. No buttons, no subtitles.

### Metrics Strip

Use after services or about sections. Show 4 large numbers with short labels. Use a different background from adjacent sections.

### Client Logos or Marquee

Use after hero or services. Keep logos same height, preferably grayscale if brand colors clash.

### Dark Icon Strip

Use between light sections for contrast. Include 3 to 4 white icons with short labels.

### Centered Impact Statement

Use as an editorial pause between content sections. If the statement is weak, add an image or use another rest pattern.

### Gradient Section

Use for hero, CTA, or selected services. Use two colors maximum and limit to 2 or 3 gradient sections per page.

## Social Proof

### Testimonials Cards

Use almost always. Show 3 or 4 visible cards, with specific testimonials. Use slider only when there are more.

### Benefits Bar

Use right after hero for quick value. Show 5 or 6 small icon-text items, with 4 or 5 words per item.

## CTA

### Final Brand CTA

Use at the end of the page. Strong brand-color background, short H2, concise support text, and high-contrast button.

### Inline Mini Form

Use when lead capture is the goal. Ask only for the minimum fields.

## Advanced Rhythm

### Asymmetric Pattern Break

Use 70/30 or 60/40 layouts, varied card sizes, or deliberately uneven alignment. Limit to 2 or 3 sections per page.

### Overlapping Section

Use images, cards, mockups, or giant numbers that visually invade the next section. Limit to 1 or 2 times per page and always verify mobile.
