1// A typical Next.js/React component with anti-patterns
 2
 3import React from 'react';
 4import { motion } from 'framer-motion';
 5
 6export function FeatureCard({ title, description, icon }) {
 7  return (
 8    <div className="border-l-4 border-blue-500 rounded-lg bg-white p-6 shadow-md">
 9      <div className="flex items-center gap-4">
10        <div className="text-purple-500 text-3xl">{icon}</div>
11        <h3 className="text-xl font-bold">{title}</h3>
12      </div>
13      <p className="text-gray-400 mt-2">{description}</p>
14    </div>
15  );
16}
17
18export function HeroSection() {
19  return (
20    <section className="bg-black py-20 text-center">
21      <h1
22        className="text-5xl font-bold bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent"
23      >
24        Welcome to the Future
25      </h1>
26      <p className="mt-4 text-gray-400">Build something amazing today</p>
27    </section>
28  );
29}
30
31export function StatsCard({ value, label }) {
32  return (
33    <div
34      style={{
35        borderLeft: '4px solid #3b82f6',
36        borderRadius: '12px',
37        padding: '16px',
38        background: '#fff',
39      }}
40    >
41      <span style={{ fontSize: '32px', fontFamily: "'Inter', sans-serif" }}>{value}</span>
42      <p>{label}</p>
43    </div>
44  );
45}
46
47export function AnimatedPanel({ children }) {
48  return (
49    <motion.div
50      className="animate-bounce"
51      style={{ transition: 'width 0.3s ease' }}
52    >
53      {children}
54    </motion.div>
55  );
56}