Icons (아이콘)

import { Zap, Shield, Gauge } from "lucide-react";
 
export default function Features() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-lg">
      {/* Primary (Blue) */}
      <div className="p-lg bg-white border rounded text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-full mb-md">
          <Zap size={32} className="text-primary-500" />
        </div>
        <h3 className="text-xl font-semibold text-text-primary mb-sm">Fast</h3>
        <p className="text-text-secondary">Lightning fast performance</p>
      </div>
 
      {/* Secondary (Green) */}
      <div className="p-lg bg-white border rounded text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-secondary-100 rounded-full mb-md">
          <Shield size={32} className="text-secondary-500" />
        </div>
        <h3 className="text-xl font-semibold text-text-primary mb-sm">
          Secure
        </h3>
        <p className="text-text-secondary">Enterprise-grade security</p>
      </div>
 
      {/* Accent (Orange) */}
      <div className="p-lg bg-white border rounded text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-accent-50 rounded-full mb-md">
          <Gauge size={32} className="text-accent-500" />
        </div>
        <h3 className="text-xl font-semibold text-text-primary mb-sm">
          Reliable
        </h3>
        <p className="text-text-secondary">99.9% uptime guarantee</p>
      </div>
    </div>
  );
}