mirror of
https://github.com/Motion-Games/MotionWebStudio.git
synced 2026-04-21 17:10:54 +02:00
stripe
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Check, Star } from 'lucide-react';
|
||||
import { Check, Star, ShieldCheck, Clock, Info } from 'lucide-react';
|
||||
import { Button } from '../components/Button';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { supabase } from '../lib/supabaseClient';
|
||||
@@ -14,11 +15,22 @@ export const Products: React.FC = () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('plans')
|
||||
.select('*')
|
||||
.order('price', { ascending: true });
|
||||
.select('*');
|
||||
|
||||
if (!error && data && data.length > 0) {
|
||||
setPackages(data);
|
||||
const sortedData = [...data].sort((a, b) => {
|
||||
const priceA = a.is_custom_price ? Infinity : (a.total_price || 0);
|
||||
const priceB = b.is_custom_price ? Infinity : (b.total_price || 0);
|
||||
return priceA - priceB;
|
||||
});
|
||||
setPackages(sortedData);
|
||||
} else {
|
||||
const sortedDefaults = [...defaultPlans].sort((a, b) => {
|
||||
const priceA = a.is_custom_price ? Infinity : (a.total_price || 0);
|
||||
const priceB = b.is_custom_price ? Infinity : (b.total_price || 0);
|
||||
return priceA - priceB;
|
||||
});
|
||||
setPackages(sortedDefaults);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error fetching plans:", e);
|
||||
@@ -27,6 +39,8 @@ export const Products: React.FC = () => {
|
||||
fetchPlans();
|
||||
}, []);
|
||||
|
||||
const formatPrice = (num: number) => num.toLocaleString('hu-HU') + ' Ft';
|
||||
|
||||
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">
|
||||
@@ -38,48 +52,88 @@ export const Products: React.FC = () => {
|
||||
</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
|
||||
{packages.map((pkg, index) => {
|
||||
const remaining = (pkg.total_price || 0) - (pkg.advance_price || 0);
|
||||
|
||||
return (
|
||||
<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 block">
|
||||
{pkg.is_custom_price ? 'Egyedi árazás' : (pkg.price || 'Egyedi árazás')}
|
||||
</span>
|
||||
{!pkg.is_custom_price && pkg.advance_price && pkg.advance_price > 0 ? (
|
||||
<div className="mt-3 p-3 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-1 text-center border-b border-gray-200 pb-1">Fizetési ütemezés</p>
|
||||
<div className="mt-2 space-y-1">
|
||||
<p className="text-sm font-bold text-gray-700 flex justify-between"><span>Előleg:</span> <span>{formatPrice(pkg.advance_price)}</span></p>
|
||||
<p className="text-sm font-medium text-gray-500 flex flex-col pt-1 border-t border-gray-100 mt-1">
|
||||
<span className="text-[10px] font-bold text-primary uppercase">Demó elfogadása után:</span>
|
||||
<span className="font-bold text-gray-700">{formatPrice(remaining)}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</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 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>
|
||||
|
||||
<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>
|
||||
{/* Maintenance Info Panel */}
|
||||
<div className="mt-12 w-full">
|
||||
<div className="bg-white border border-gray-200 rounded-[32px] p-6 md:p-10 shadow-sm flex flex-col md:flex-row items-center gap-6 md:gap-10">
|
||||
<div className="w-16 h-16 md:w-20 md:h-20 bg-primary/5 rounded-3xl flex items-center justify-center text-primary shrink-0 border border-primary/10">
|
||||
<ShieldCheck className="w-8 h-8 md:w-10 md:h-10" />
|
||||
</div>
|
||||
<div className="flex-grow text-center md:text-left">
|
||||
<h4 className="text-lg md:text-xl font-bold text-gray-900 mb-2 uppercase tracking-tight">Éves üzemeltetés és karbantartás</h4>
|
||||
<p className="text-sm md:text-base text-gray-600 leading-relaxed mb-4">
|
||||
Minden csomagunkhoz egységes, kedvező üzemeltetési díj tartozik, amely tartalmazza a tárhelyet, a biztonsági mentéseket és a folyamatos monitorozást. <strong>A csomagár tartalmazza az első év üzemeltetését, így az első éves díj megfizetése csak a projekt átadását követő egy év múlva válik esedékessé.</strong>
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center md:justify-start gap-4 text-[10px] md:text-xs font-bold uppercase tracking-widest text-gray-400">
|
||||
<span className="flex items-center gap-1.5"><Clock className="w-3.5 h-3.5 text-primary" /> 2026-ig rögzített ár</span>
|
||||
<span className="flex items-center gap-1.5"><Info className="w-3.5 h-3.5 text-primary" /> Éves inflációkövető korrekció lehetséges</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="bg-primary text-white rounded-[24px] px-8 py-6 text-center shadow-xl shadow-primary/20 min-w-[220px]">
|
||||
<p className="text-[10px] font-bold opacity-70 uppercase tracking-[0.2em] mb-1">Éves Fenntartás</p>
|
||||
<p className="text-2xl md:text-3xl font-black">59 990 Ft</p>
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user