Sections

Feature Section

Grid of feature cards with icons and descriptions

Quick Preview

Learn what actually transfers

Every section is designed to help you understand, adapt, and ship with more confidence.

🧠

Mental models before memorisation

Understand why App Router, rendering boundaries, and data flow work the way they do.

🧩

Examples you can inspect

Read complete components, layouts, and sections instead of disconnected snippets.

🏗️

Production-first progression

Move deliberately from fundamentals to architecture, scale, and maintainability.

🎯

Design and engineering together

Study UI systems, motion, tokens, accessibility, and implementation as one discipline.

Customising Content

// src/lib/constants.ts
export const HOME_FEATURES: FeatureItem[] = [
  { icon: '⚡', title: 'Lightning Fast',  description: 'Sub-100ms response times, globally distributed.' },
  { icon: '🔒', title: 'Secure by Default', description: 'End-to-end encryption on every request.' },
  { icon: '📈', title: 'Built to Scale', description: 'Handles millions of events without breaking a sweat.' },
  { icon: '🛠️', title: 'Developer First', description: 'Intuitive APIs and comprehensive documentation.' },
]

Installation

# Copy the component file
cp src/components/sections/FeatureSection.tsx your-project/src/components/sections/

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a sections component named Feature Section in React/Next.js.
Goal: recreate the same overall UI and behavior as the Feature Section reference from a component gallery.
What it needs to communicate: Grid of feature cards with icons and descriptions.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Treat the result as a full-width section with strong layout rhythm and responsive spacing.
- Preserve headline hierarchy, supporting copy, and clear CTA emphasis.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- No documented props were provided, so infer a minimal but production-ready API from the reference.

Reference usage patterns:
- Feature Section

```tsx
<FeatureSection />
```

Feature expectations:
- Teal mint background
- 4-column responsive grid
- White cards with shadow
- Heading with teal accent underline
- Uses HOME_FEATURES constant

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

This component has no props.

This component uses HOME_FEATURES constant from lib/constants.ts

Features

✓Teal mint background
✓4-column responsive grid
✓White cards with shadow
✓Heading with teal accent underline
✓Uses HOME_FEATURES constant

← Back to Sections