cards.featureCard.title

쉬움

cards.featureCard.description

#hover#css-only

라이브 데모

⚡

Lightning Fast

Optimized for performance with sub-second load times and instant interactions.

✓ Instant loading
✓ Real-time updates
✓ Offline support

코드

FeatureCard.tsx

export const FeatureCard: React.FC = () => (
  <div className="feature-card">
    <div className="feature-icon-wrapper">
      <div className="feature-icon">⚡</div>
    </div>
    <h3 className="feature-title">Lightning Fast</h3>
    <p className="feature-description">
      Optimized for performance with sub-second load times.
    </p>
    <button className="feature-button">Learn More →</button>
  </div>
);

cards.css

.feature-card {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  padding: 32px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  border-color: var(--accent-purple);
  transform: translateY(-4px);
}