Initial: pi-skill — 68 skills, 43 extensions, 11 themes for Pi

skills/scripts/templates/src/components/product/ProductFeature.tsx

@@ -0,0 +1,49 @@
+interface ProductFeatureProps {
+  title: string;
+  images?: string[];
+  fullDescription?: string;
+  featuresDetails?: { title: string; items: string[] }[];
+}
+
+export default function ProductFeature({ title, images, fullDescription, featuresDetails }: ProductFeatureProps) {
+  return (
+    <div className="py-12">
+      <h2 className="text-2xl font-bold text-center mb-8">{title}</h2>
+      
+      <div className="grid md:grid-cols-2 gap-12 items-center">
+        <div className="space-y-6">
+          {fullDescription && (
+            <p className="text-gray-600">{fullDescription}</p>
+          )}
+          
+          {featuresDetails?.map((feature, i) => (
+            <div key={i}>
+              <h3 className="font-bold mb-2">{feature.title}</h3>
+              <ul className="space-y-2">
+                {feature.items.map((item, j) => (
+                  <li key={j} className="flex items-start gap-2">
+                    <span className="w-5 h-5 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-sm flex-shrink-0 mt-0.5">
+                      ✓
+                    </span>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        
+        <div className="space-y-4">
+          {images?.map((img, i) => (
+            <img
+              key={i}
+              src={img}
+              alt=""
+              className="w-full rounded-xl"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}