Spaces:
Build error
Build error
| import FeatureCard from './FeatureCard'; | |
| export default function Features() { | |
| const features = [ | |
| { | |
| icon: "🚀", | |
| title: "High Performance", | |
| description: "Built with Next.js for optimal performance and fast loading times. Experience lightning-fast page loads and smooth interactions." | |
| }, | |
| { | |
| icon: "📱", | |
| title: "Responsive Design", | |
| description: "Mobile-first approach ensures your application looks great on all devices. From smartphones to desktop computers." | |
| }, | |
| { | |
| icon: "🎨", | |
| title: "Modern UI", | |
| description: "Clean, modern interface designed with Tailwind CSS. Beautiful components that enhance user experience." | |
| }, | |
| { | |
| icon: "⚡", | |
| title: "Fast Development", | |
| description: "Hot reload, TypeScript support, and modern tooling for rapid development. Build features faster than ever." | |
| }, | |
| { | |
| icon: "🔒", | |
| title: "Secure", | |
| description: "Built-in security features and best practices. Protect your users' data with enterprise-grade security." | |
| }, | |
| { | |
| icon: "🌐", | |
| title: "Scalable", | |
| description: "Architecture that grows with your needs. Handle thousands of users without performance degradation." | |
| } | |
| ]; | |
| return ( | |
| <section id="features" className="py-20 bg-gray-50"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="text-center mb-16"> | |
| <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"> | |
| Amazing Features | |
| </h2> | |
| <p className="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Discover the powerful features that make our React application stand out from the rest. | |
| </p> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| {features.map((feature, index) => ( | |
| <div key={index} className="animate-fade-in" style={{ animationDelay: `${index * 0.1}s` }}> | |
| <FeatureCard {...feature} /> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } |