Features & Grids

Feature Bento Grid

Interactive bento-box features showcase with variable grid spans.

featuresbentogridmetricsglassmorphism

Live Preview

Core Capabilities

Engineered for Extreme Performance

Everything you need to build next-generation Astro applications with zero runtime overhead.

Zero Runtime JS

Pure Static Architecture

Components ship zero client-side JavaScript by default, delivering perfect 100/100 Lighthouse performance scores out of the box.

100Lighthouse Score

Performance

Accessibility

Best Practices

WCAG 2.1 AA

Accessible & Tested

Every button, input, and modal conforms strictly to WCAG AA guidelines with keyboard navigation and ARIA attributes.

CSS Tokens

Fluid Design Tokens

Seamless global variables for colors, typography scales, glass blurs, and border radiuses.

TypeScript 5.x

Strict Type Safety

Full TypeScript IntelliSense with prop auto-completion and compile-time validation in your IDE.

interface Props { variant: 'glass' | 'glow' }

Three.js & WebGL

Interactive 3D Galaxy & Visuals

GPU-accelerated particle galaxy backgrounds with smooth physics, mouse-follow damping, and hardware-accelerated shaders.

60 FPS Fluid Physics Engine

Usage

Copy and paste this code into your React component:

import { FeatureBentoGrid } from 'react-component-kit-ui/sections';

<FeatureBentoGrid />

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/sections/FeatureBentoGrid.tsx + FeatureBentoGrid.css:

'use client';

import './FeatureBentoGrid.css';

/**
 * FeatureBentoGrid — Full-page modern Bento-Grid features section with interactive widgets and metric cards.
 * 
 * @param {string} badge - Eyebrow badge text.
 * @param {string} title - Main section heading.
 * @param {string} subtitle - Supporting description text.
 */
export interface FeatureBentoGridProps {
  badge?: string;
  title?: string;
  subtitle?: string;
  className?: string;
}

export function FeatureBentoGrid({
  badge = "Core Capabilities",
  title = "Engineered for Extreme Performance",
  subtitle = "Everything you need to build next-generation Astro applications with zero runtime overhead.",
  className = ""
}: FeatureBentoGridProps) {
  return (
    <>
      <div className="cq-feature-bento-grid-cq" data-rk-c1d0ee="">
      <section className={`bento-section ${className}`} aria-labelledby="bento-title" data-rk-c1d0ee="">
        <div className="bento-bg" aria-hidden="true" data-rk-c1d0ee="">
          <div className="bento-glow bento-glow--1" data-rk-c1d0ee=""></div>
          <div className="bento-glow bento-glow--2" data-rk-c1d0ee=""></div>
        </div>
      
        <div className="container" data-rk-c1d0ee="">
          {/* Header */}
          <div className="section-header" data-rk-c1d0ee="">
            {badge && <span className="section-badge" data-rk-c1d0ee="">{badge}</span>}
            <h2 id="bento-title" className="section-title" data-rk-c1d0ee="">{title}</h2>
            <p className="section-subtitle" data-rk-c1d0ee="">{subtitle}</p>
          </div>
      
          {/* Bento Grid Container */}
          <div className="bento-grid" data-rk-c1d0ee="">
            {/* Slot 1: Large Highlight (Span 2 col) */}
            <article className="bento-card bento-card--wide" data-rk-c1d0ee="">
              <div className="bento-card__content" data-rk-c1d0ee="">
                <div className="bento-card__icon bento-card__icon--primary" data-rk-c1d0ee="">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-rk-c1d0ee=""><path d="m18 16 4-4-4-4" data-rk-c1d0ee="" /><path d="m6 8-4 4 4 4" data-rk-c1d0ee="" /><path d="m14.5 4-5 16" data-rk-c1d0ee="" /></svg>
                </div>
                <span className="bento-tag" data-rk-c1d0ee="">Zero Runtime JS</span>
                <h3 className="bento-card__title" data-rk-c1d0ee="">Pure Static Architecture</h3>
                <p className="bento-card__desc" data-rk-c1d0ee="">
                  Components ship zero client-side JavaScript by default, delivering perfect 100/100 Lighthouse performance scores out of the box.
                </p>
                <div className="bento-speed-stat" data-rk-c1d0ee="">
                  <div className="speed-score" data-rk-c1d0ee="">
                    <span className="score-number" data-rk-c1d0ee="">100</span>
                    <span className="score-label" data-rk-c1d0ee="">Lighthouse Score</span>
                  </div>
                  <div className="speed-bars" data-rk-c1d0ee="">
                    <div className="speed-bar" data-rk-c1d0ee=""><span className="bar-fill" style={{ width: "100%" }} data-rk-c1d0ee=""></span><span className="bar-name" data-rk-c1d0ee="">Performance</span></div>
                    <div className="speed-bar" data-rk-c1d0ee=""><span className="bar-fill" style={{ width: "100%" }} data-rk-c1d0ee=""></span><span className="bar-name" data-rk-c1d0ee="">Accessibility</span></div>
                    <div className="speed-bar" data-rk-c1d0ee=""><span className="bar-fill" style={{ width: "100%" }} data-rk-c1d0ee=""></span><span className="bar-name" data-rk-c1d0ee="">Best Practices</span></div>
                  </div>
                </div>
              </div>
            </article>
      
            {/* Slot 2: Security & Accessibility (Tall) */}
            <article className="bento-card bento-card--tall" data-rk-c1d0ee="">
              <div className="bento-card__content" data-rk-c1d0ee="">
                <div className="bento-card__icon bento-card__icon--gold" data-rk-c1d0ee="">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-rk-c1d0ee=""><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" data-rk-c1d0ee="" /><path d="m9 12 2 2 4-4" data-rk-c1d0ee="" /></svg>
                </div>
                <span className="bento-tag" data-rk-c1d0ee="">WCAG 2.1 AA</span>
                <h3 className="bento-card__title" data-rk-c1d0ee="">Accessible & Tested</h3>
                <p className="bento-card__desc" data-rk-c1d0ee="">
                  Every button, input, and modal conforms strictly to WCAG AA guidelines with keyboard navigation and ARIA attributes.
                </p>
                <div className="a11y-pill-list" data-rk-c1d0ee="">
                  <div className="a11y-pill" data-rk-c1d0ee="">✓ Focus Rings Built-in</div>
                  <div className="a11y-pill" data-rk-c1d0ee="">✓ Keyboard Nav (Tab/Esc)</div>
                  <div className="a11y-pill" data-rk-c1d0ee="">✓ Contrast Ratio ≥ 4.5:1</div>
                  <div className="a11y-pill" data-rk-c1d0ee="">✓ Screen Reader Ready</div>
                </div>
              </div>
            </article>
      
            {/* Slot 3: Design Tokens & Theming */}
            <article className="bento-card" data-rk-c1d0ee="">
              <div className="bento-card__content" data-rk-c1d0ee="">
                <div className="bento-card__icon bento-card__icon--cyan" data-rk-c1d0ee="">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-rk-c1d0ee=""><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" data-rk-c1d0ee="" /><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" data-rk-c1d0ee="" /><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" data-rk-c1d0ee="" /><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" data-rk-c1d0ee="" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" data-rk-c1d0ee="" /></svg>
                </div>
                <span className="bento-tag" data-rk-c1d0ee="">CSS Tokens</span>
                <h3 className="bento-card__title" data-rk-c1d0ee="">Fluid Design Tokens</h3>
                <p className="bento-card__desc" data-rk-c1d0ee="">
                  Seamless global variables for colors, typography scales, glass blurs, and border radiuses.
                </p>
                <div className="tokens-preview" data-rk-c1d0ee="">
                  <span className="color-dot color-dot--gold" data-rk-c1d0ee=""></span>
                  <span className="color-dot color-dot--indigo" data-rk-c1d0ee=""></span>
                  <span className="color-dot color-dot--emerald" data-rk-c1d0ee=""></span>
                  <span className="color-dot color-dot--rose" data-rk-c1d0ee=""></span>
                </div>
              </div>
            </article>
      
            {/* Slot 4: TypeScript Strict */}
            <article className="bento-card" data-rk-c1d0ee="">
              <div className="bento-card__content" data-rk-c1d0ee="">
                <div className="bento-card__icon bento-card__icon--blue" data-rk-c1d0ee="">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-rk-c1d0ee=""><rect width="18" height="18" x="3" y="3" rx="2" data-rk-c1d0ee="" /><path d="M7 7h10" data-rk-c1d0ee="" /><path d="M12 7v10" data-rk-c1d0ee="" /></svg>
                </div>
                <span className="bento-tag" data-rk-c1d0ee="">TypeScript 5.x</span>
                <h3 className="bento-card__title" data-rk-c1d0ee="">Strict Type Safety</h3>
                <p className="bento-card__desc" data-rk-c1d0ee="">
                  Full TypeScript IntelliSense with prop auto-completion and compile-time validation in your IDE.
                </p>
                <div className="code-snippet-mini" data-rk-c1d0ee="">
                  <code data-rk-c1d0ee="">interface Props &#123; variant: 'glass' | 'glow' &#125;</code>
                </div>
              </div>
            </article>
      
            {/* Slot 5: 3D & Particle Shaders (Wide) */}
            <article className="bento-card bento-card--wide" data-rk-c1d0ee="">
              <div className="bento-card__content" data-rk-c1d0ee="">
                <div className="bento-card__icon bento-card__icon--purple" data-rk-c1d0ee="">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-rk-c1d0ee=""><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" data-rk-c1d0ee="" /><polyline points="3.27 6.96 12 12.01 20.73 6.96" data-rk-c1d0ee="" /><line x1="12" y1="22.08" x2="12" y2="12" data-rk-c1d0ee="" /></svg>
                </div>
                <span className="bento-tag" data-rk-c1d0ee="">Three.js & WebGL</span>
                <h3 className="bento-card__title" data-rk-c1d0ee="">Interactive 3D Galaxy & Visuals</h3>
                <p className="bento-card__desc" data-rk-c1d0ee="">
                  GPU-accelerated particle galaxy backgrounds with smooth physics, mouse-follow damping, and hardware-accelerated shaders.
                </p>
                <div className="live-pill" data-rk-c1d0ee="">
                  <span className="live-dot" data-rk-c1d0ee=""></span>
                  <span data-rk-c1d0ee="">60 FPS Fluid Physics Engine</span>
                </div>
              </div>
            </article>
          </div>
        </div>
      </section>
      </div>
    </>
  );
}

export default FeatureBentoGrid;

/* FeatureBentoGrid — ported from astro-component-kit (sections/FeatureBentoGrid.astro) */

.cq-feature-bento-grid-cq:where([data-rk-c1d0ee]) { container-type: inline-size; }
.bento-section:where([data-rk-c1d0ee]) {
  position: relative;
  padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
  background: var(--c-bg-primary, #030712);
  overflow: hidden;
}

.bento-bg:where([data-rk-c1d0ee]) {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bento-glow:where([data-rk-c1d0ee]) {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
}

.bento-glow--1:where([data-rk-c1d0ee]) {
  top: 10%;
  left: 15%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #6366f1, transparent 70%);
}

.bento-glow--2:where([data-rk-c1d0ee]) {
  bottom: 10%;
  right: 15%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #d97706, transparent 70%);
}

.container:where([data-rk-c1d0ee]) {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.section-header:where([data-rk-c1d0ee]) {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--sp-12, 3rem);
}

.section-badge:where([data-rk-c1d0ee]) {
  display: inline-flex;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.25);
  margin-bottom: var(--sp-4, 1rem);
}

.section-title:where([data-rk-c1d0ee]) {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4, 1rem);
}

.section-subtitle:where([data-rk-c1d0ee]) {
  font-size: 1.1rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* Bento Grid */
.bento-grid:where([data-rk-c1d0ee]) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.bento-card:where([data-rk-c1d0ee]) {
  position: relative;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
  border-radius: var(--r-xl, 20px);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.bento-card:hover:where([data-rk-c1d0ee]) {
  transform: translateY(-4px);
  border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
}

.bento-card--wide:where([data-rk-c1d0ee]) {
  grid-column: span 2;
}

.bento-card--tall:where([data-rk-c1d0ee]) {
  grid-row: span 2;
}

.bento-card__icon:where([data-rk-c1d0ee]) {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.bento-card__icon--primary:where([data-rk-c1d0ee]) { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.bento-card__icon--gold:where([data-rk-c1d0ee]) { background: rgba(234, 179, 8, 0.15); color: #facc15; }
.bento-card__icon--cyan:where([data-rk-c1d0ee]) { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.bento-card__icon--blue:where([data-rk-c1d0ee]) { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.bento-card__icon--purple:where([data-rk-c1d0ee]) { background: rgba(168, 85, 247, 0.15); color: #c084fc; }

.bento-tag:where([data-rk-c1d0ee]) {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.bento-card__title:where([data-rk-c1d0ee]) {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.bento-card__desc:where([data-rk-c1d0ee]) {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

/* Internal mini-widgets */
.bento-speed-stat:where([data-rk-c1d0ee]) {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.05);
}

.speed-score:where([data-rk-c1d0ee]) {
  text-align: center;
  padding-right: 1.5rem;
  border-right: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
}

.score-number:where([data-rk-c1d0ee]) {
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  color: #10b981;
  line-height: 1;
}

.score-label:where([data-rk-c1d0ee]) {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
}

.speed-bars:where([data-rk-c1d0ee]) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.speed-bar:where([data-rk-c1d0ee]) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bar-fill:where([data-rk-c1d0ee]) {
  height: 6px;
  background: #10b981;
  border-radius: 999px;
}

.bar-name:where([data-rk-c1d0ee]) {
  font-size: 0.75rem;
  color: #cbd5e1;
  font-weight: 600;
}

.a11y-pill-list:where([data-rk-c1d0ee]) {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.a11y-pill:where([data-rk-c1d0ee]) {
  padding: 0.6rem 0.85rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
  border-radius: 8px;
  font-size: 0.82rem;
  color: #cbd5e1;
  font-weight: 500;
}

.tokens-preview:where([data-rk-c1d0ee]) {
  display: flex;
  gap: 0.5rem;
}

.color-dot:where([data-rk-c1d0ee]) {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgb(var(--ink-rgb, 255 255 255) / 0.2);
}
.color-dot--gold:where([data-rk-c1d0ee]) { background: #eab308; }
.color-dot--indigo:where([data-rk-c1d0ee]) { background: #6366f1; }
.color-dot--emerald:where([data-rk-c1d0ee]) { background: #10b981; }
.color-dot--rose:where([data-rk-c1d0ee]) { background: #f43f5e; }

.code-snippet-mini:where([data-rk-c1d0ee]) {
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
  font-size: 0.8rem;
  color: #93c5fd;
  font-family: var(--font-mono, monospace);
}

.live-pill:where([data-rk-c1d0ee]) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 9999px;
  font-size: 0.82rem;
  color: #d8b4fe;
  font-weight: 600;
}

.live-dot:where([data-rk-c1d0ee]) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 10px #a855f7;
  animation: feature-bento-grid-pulse 2s infinite ease-in-out;
}

@keyframes feature-bento-grid-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

@container (max-width: 960px) {
  .bento-grid:where([data-rk-c1d0ee]) {
    grid-template-columns: 1fr;
  }
  .bento-card--wide:where([data-rk-c1d0ee]), .bento-card--tall:where([data-rk-c1d0ee]) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .bento-speed-stat:where([data-rk-c1d0ee]) {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .speed-score:where([data-rk-c1d0ee]) {
    border-right: none;
    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
    padding-right: 0;
    padding-bottom: 0.75rem;
    width: 100%;
    text-align: left;
  }
}