Content Section

A hero section component with animated text highlighting, perfect for landing pages and introductory content areas.

Super simple Components
ForDEVS

Easy to use, customizable UI components with NeoBrutalism style. Perfect for creating modern, eye-catching interfaces.

Usage

import ContentSection from '@/components/ContentSection';

export default function MyPage() {
  return (
    <ContentSection 
      highlightWords={["Designers", "Developers", "Creators", "Teams"]} 
      highlightColors={["#f87171", "#60a5fa", "#34d399", "#fbbf24"]}
    />
  );
}

Examples

Default Content Section

A content section with default highlighted words and colors.

Super simple Components
ForDEVS

Easy to use, customizable UI components with NeoBrutalism style. Perfect for creating modern, eye-catching interfaces.

<ContentSection />

Custom Highlights

Content section with custom words and colors for the highlight animation.

Super simple Components
ForDesigners

Easy to use, customizable UI components with NeoBrutalism style. Perfect for creating modern, eye-catching interfaces.

<ContentSection 
  highlightWords={["Designers", "Developers", "Creators", "Teams"]} 
  highlightColors={["#f87171", "#60a5fa", "#34d399", "#fbbf24"]}
/>

Customized Width

Content section with a constrained width using the className prop.

Super simple Components
ForStart-ups

Easy to use, customizable UI components with NeoBrutalism style. Perfect for creating modern, eye-catching interfaces.

<ContentSection 
  className="max-w-lg"
  highlightWords={["Start-ups", "Agencies", "Freelancers"]} 
  highlightColors={["#ec4899", "#8b5cf6", "#0ea5e9"]}
/>