[ [LC.03] Components ] Features Section

Features Section

> Grid-based feature showcases with icons, descriptions, and terminal-style headers.

Preview

[ [0x00] FEATURES SECTION ]

[ [0x20] FEATURES ] CORE_MODULES

WHAT'S INCLUDED

AUTHENTICATION

NextAuth v5 with multiple providers

PAYMENTS

Stripe integration ready

Resend for transactional emails

DATABASE

Prisma ORM with PostgreSQL

SECURITY

CSRF, rate limiting, validation

PERFORMANCE

Optimized for Core Web Vitals

1import { FeaturesSection } from "@/components/marketing/features-section";
2
3export default function LandingPage() {
4  return (
5    <main>
6      <HeroSection />
7      <FeaturesSection />
8      {/* Other sections */}
9    </main>
10  );
11}

Variants

[ [0x00] TECH STACK DISPLAY ]

[ [0x70] TECH STACK ] DEPENDENCIES

NEXT.JS[OK]

REACT[OK]

TYPESCRIPT[OK]

TAILWIND[OK]

PRISMA[OK]

STRIPE[OK]

RESEND[OK]

1import { TechStack } from "@/components/marketing/tech-stack";
2
3<TechStack />
4
5// Displays technology logos with [OK] status badges

[ [0x00] FEATURE CARD ]

AUTHENTICATION

NextAuth v5 with Google OAuth, credentials, and magic link support.

1<div className="border border-border bg-card p-4 hover:bg-muted/50">
2  <div className="flex items-center gap-2 mb-4">
3    <Shield className="h-4 w-4 text-primary" />
4    <span className="font-mono text-xs font-semibold">AUTHENTICATION</span>
5  </div>
6  <p className="font-mono text-xs text-muted-foreground">
7    NextAuth v5 with multiple providers
8  </p>
9</div>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
features	`{ icon: LucideIcon; title: string; description: string }[]`	-	Array of features to display
columns	`2 \| 3 \| 4`	`3`	Number of columns in the grid

Accessibility

[ [0x58] A11Y ]

Icons are decorative and hidden from screen readers
Each feature has semantic heading structure
Keyboard navigation through focusable cards
High contrast text for readability

Preview

[ [0x00] FEATURES SECTION ]

[ [0x20] FEATURES ] CORE_MODULES

WHAT'S INCLUDED

AUTHENTICATION

NextAuth v5 with multiple providers

PAYMENTS

Stripe integration ready

Resend for transactional emails

DATABASE

Prisma ORM with PostgreSQL

SECURITY

CSRF, rate limiting, validation

PERFORMANCE

Optimized for Core Web Vitals

1import { FeaturesSection } from "@/components/marketing/features-section";
2
3export default function LandingPage() {
4  return (
5    <main>
6      <HeroSection />
7      <FeaturesSection />
8      {/* Other sections */}
9    </main>
10  );
11}

Variants

[ [0x00] TECH STACK DISPLAY ]

[ [0x70] TECH STACK ] DEPENDENCIES

NEXT.JS[OK]

REACT[OK]

TYPESCRIPT[OK]

TAILWIND[OK]

PRISMA[OK]

STRIPE[OK]

RESEND[OK]

1import { TechStack } from "@/components/marketing/tech-stack";
2
3<TechStack />
4
5// Displays technology logos with [OK] status badges

[ [0x00] FEATURE CARD ]

AUTHENTICATION

NextAuth v5 with Google OAuth, credentials, and magic link support.

1<div className="border border-border bg-card p-4 hover:bg-muted/50">
2  <div className="flex items-center gap-2 mb-4">
3    <Shield className="h-4 w-4 text-primary" />
4    <span className="font-mono text-xs font-semibold">AUTHENTICATION</span>
5  </div>
6  <p className="font-mono text-xs text-muted-foreground">
7    NextAuth v5 with multiple providers
8  </p>
9</div>

Prop

Type

Default

Description

features

{ icon: LucideIcon; title: string; description: string }[]

Array of features to display

columns

2 | 3 | 4

3

Number of columns in the grid