init

pages/Products.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import { Check, Star } from 'lucide-react';
+import { Button } from '../components/Button';
+import { Link } from 'react-router-dom';
+import { supabase } from '../lib/supabaseClient';
+import { ProductPackage } from '../types';
+import { defaultPlans } from '../lib/defaultPlans';
+
+export const Products: React.FC = () => {
+  const [packages, setPackages] = useState<ProductPackage[]>(defaultPlans);
+
+  useEffect(() => {
+    const fetchPlans = async () => {
+      try {
+        const { data, error } = await supabase
+          .from('plans')
+          .select('*')
+          .order('price', { ascending: true });
+        
+        if (!error && data && data.length > 0) {
+          setPackages(data);
+        }
+      } catch (e) {
+        console.error("Error fetching plans:", e);
+      }
+    };
+    fetchPlans();
+  }, []);
+
+  return (
+    <div className="pt-20 bg-gray-50 min-h-screen">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="text-center mb-16">
+          <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Csomagajánlataink</h1>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Átlátható árazás, rejtett költségek nélkül. Válassza az Ön céljaihoz leginkább illeszkedő csomagot.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {packages.map((pkg, index) => (
+            <div 
+              key={index} 
+              className={`relative bg-white rounded-2xl shadow-xl flex flex-col p-8 transition-transform hover:-translate-y-2 duration-300 ${pkg.isPopular ? 'border-2 border-primary ring-4 ring-purple-100' : 'border border-gray-100'}`}
+            >
+              {pkg.isPopular && (
+                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-primary to-secondary text-white px-4 py-1 rounded-full text-sm font-bold shadow-lg flex items-center gap-1">
+                  <Star className="w-4 h-4 fill-current" /> Legnépszerűbb
+                </div>
+              )}
+              
+              <div className="mb-6">
+                <h3 className="text-2xl font-bold text-gray-900">{pkg.name}</h3>
+                <p className="text-gray-500 mt-2 text-sm min-h-[40px]">{pkg.desc}</p>
+              </div>
+
+              <div className="mb-8">
+                <span className="text-3xl font-extrabold text-gray-900">{pkg.price}</span>
+                {pkg.price.includes('Ft') && <span className="text-gray-500 text-sm font-normal"> + ÁFA</span>}
+              </div>
+
+              <ul className="space-y-4 mb-8 flex-grow">
+                {pkg.features.map((feature, i) => (
+                  <li key={i} className="flex items-start text-gray-600">
+                    <Check className="w-5 h-5 text-green-500 mr-3 flex-shrink-0 mt-0.5" />
+                    <span className="text-sm">{feature}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="mt-auto">
+                <Link to="/contact">
+                  <Button 
+                    variant={pkg.isPopular ? 'primary' : 'outline'} 
+                    fullWidth
+                  >
+                    {pkg.cta}
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-20 bg-white rounded-2xl p-8 md:p-12 shadow-sm border border-gray-100 flex flex-col md:flex-row items-center justify-between gap-8">
+          <div>
+            <h3 className="text-2xl font-bold text-gray-900 mb-2">Egyedi igényei vannak?</h3>
+            <p className="text-gray-600">
+              Nem találja a megfelelő csomagot? Készítünk Önnek egy teljesen személyre szabott ajánlatot.
+            </p>
+          </div>
+          <Link to="/contact">
+            <Button size="lg">Kapcsolatfelvétel</Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};