1a4bdb1fe1
Es gibt nun task collections und vordefinierte tasks für alle. Onboarding verfeinert und webseite-carousel gefixt (logging später entfernen!)
539 lines
28 KiB
TypeScript
539 lines
28 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Head, Link, usePage } from '@inertiajs/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Progress } from "@/components/ui/progress"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
|
|
import MarketingLayout from '@/layouts/mainWebsite';
|
|
import { ArrowRight, ShoppingCart, Check, X, Users, Image, Calendar, Shield, Star } from 'lucide-react';
|
|
|
|
interface Package {
|
|
id: number;
|
|
name: string;
|
|
description: string;
|
|
price: number;
|
|
events: number;
|
|
features: string[];
|
|
limits?: {
|
|
max_photos?: number;
|
|
max_guests?: number;
|
|
max_tenants?: number;
|
|
max_events?: number;
|
|
gallery_days?: number;
|
|
};
|
|
watermark_allowed?: boolean;
|
|
branding_allowed?: boolean;
|
|
}
|
|
|
|
interface PackagesProps {
|
|
endcustomerPackages: Package[];
|
|
resellerPackages: Package[];
|
|
}
|
|
|
|
const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackages }) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [selectedPackage, setSelectedPackage] = useState<Package | null>(null);
|
|
const [currentStep, setCurrentStep] = useState('step1');
|
|
const { props } = usePage();
|
|
const { auth } = props as any;
|
|
const { t } = useTranslation('marketing');
|
|
|
|
useEffect(() => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const packageId = urlParams.get('package_id');
|
|
if (packageId) {
|
|
const id = parseInt(packageId);
|
|
const pkg = [...endcustomerPackages, ...resellerPackages].find(p => p.id === id);
|
|
if (pkg) {
|
|
setSelectedPackage(pkg);
|
|
setOpen(true);
|
|
setCurrentStep('step1');
|
|
}
|
|
}
|
|
}, [endcustomerPackages, resellerPackages]);
|
|
|
|
const testimonials = [
|
|
{ name: t('common.testimonials.anna.name'), text: t('packages.testimonials.anna'), rating: 5 },
|
|
{ name: t('common.testimonials.max.name'), text: t('packages.testimonials.max'), rating: 5 },
|
|
{ name: t('common.testimonials.lisa.name'), text: t('packages.testimonials.lisa'), rating: 5 },
|
|
];
|
|
|
|
const allPackages = [...endcustomerPackages, ...resellerPackages];
|
|
|
|
const handleCardClick = (pkg: Package) => {
|
|
setSelectedPackage(pkg);
|
|
setCurrentStep('step1');
|
|
setOpen(true);
|
|
};
|
|
|
|
// nextStep entfernt, da Tabs nun parallel sind
|
|
|
|
const getFeatureIcon = (feature: string) => {
|
|
switch (feature) {
|
|
case 'basic_uploads': return <Image className="w-4 h-4" />;
|
|
case 'unlimited_sharing': return <ArrowRight className="w-4 h-4" />;
|
|
case 'no_watermark': return <Shield className="w-4 h-4" />;
|
|
case 'custom_tasks': return <Check className="w-4 h-4" />;
|
|
case 'advanced_analytics': return <Star className="w-4 h-4" />;
|
|
case 'priority_support': return <Users className="w-4 h-4" />;
|
|
case 'reseller_dashboard': return <ShoppingCart className="w-4 h-4" />;
|
|
case 'custom_branding': return <Image className="w-4 h-4" />;
|
|
default: return <Check className="w-4 h-4" />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<MarketingLayout title={t('packages.title')}>
|
|
{/* Hero Section */}
|
|
<section className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 py-20 px-4">
|
|
<div className="container mx-auto text-center">
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{t('packages.hero_title')}</h1>
|
|
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{t('packages.hero_description')}</p>
|
|
<Link href="#endcustomer" className="bg-white dark:bg-gray-800 text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 dark:hover:bg-gray-700 transition">
|
|
{t('packages.cta_explore')}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="endcustomer" className="py-20 px-4 dark:bg-gray-600">
|
|
<div className="container mx-auto">
|
|
<h2 className="text-3xl font-bold text-center mb-12 font-display">{t('packages.section_endcustomer')}</h2>
|
|
|
|
{/* Mobile Carousel for Endcustomer Packages */}
|
|
<div className="block md:hidden">
|
|
<Carousel className="w-full max-w-md mx-auto" opts={{ loop: true }}>
|
|
<CarouselContent className="-ml-1">
|
|
{endcustomerPackages.map((pkg) => (
|
|
<CarouselItem key={pkg.id} className="pl-1 basis-full">
|
|
<div
|
|
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
|
|
onTouchStart={(e) => console.log('Touch start on carousel item:', e.touches.length)}
|
|
onTouchMove={(e) => console.log('Touch move on carousel item:', e.touches.length)}
|
|
onTouchEnd={(e) => console.log('Touch end on carousel item')}
|
|
>
|
|
<div className="text-center mb-4">
|
|
<ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-4 font-serif-custom">{pkg.description}</p>
|
|
<p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-sans-marketing">
|
|
{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('packages.currency.euro')}`}
|
|
</p>
|
|
<ul className="text-sm text-gray-600 dark:text-gray-300 mb-6 space-y-1 font-sans-marketing">
|
|
<li>• {pkg.events} {t('packages.one_time')}</li>
|
|
{pkg.features.map((feature, index) => (
|
|
<li key={index} className="flex items-center">
|
|
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
|
|
</li>
|
|
))}
|
|
{pkg.limits?.max_photos && <li>• {t('packages.max_photos')} {pkg.limits.max_photos}</li>}
|
|
{pkg.limits?.gallery_days && <li>• {t('packages.gallery_days')} {pkg.limits.gallery_days}</li>}
|
|
{pkg.limits?.max_guests && <li>• {t('packages.max_guests')} {pkg.limits.max_guests}</li>}
|
|
{pkg.watermark_allowed === false && <li><Badge variant="secondary">{t('packages.no_watermark')}</Badge></li>}
|
|
{pkg.branding_allowed && <li><Badge variant="secondary">{t('packages.custom_branding')}</Badge></li>}
|
|
</ul>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => handleCardClick(pkg)}
|
|
className="w-full mt-4 font-sans-marketing"
|
|
>
|
|
{t('packages.view_details')}
|
|
</Button>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
</div>
|
|
|
|
{/* Desktop Grid for Endcustomer Packages */}
|
|
<div className="hidden md:block">
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{endcustomerPackages.map((pkg) => (
|
|
<div
|
|
key={pkg.id}
|
|
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
|
|
>
|
|
<div className="text-center mb-4">
|
|
<ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-4 font-serif-custom">{pkg.description}</p>
|
|
<p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-sans-marketing">
|
|
{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('packages.currency.euro')}`}
|
|
</p>
|
|
<ul className="text-sm text-gray-600 dark:text-gray-300 mb-6 space-y-1 font-sans-marketing">
|
|
<li>• {pkg.events} {t('packages.one_time')}</li>
|
|
{pkg.features.map((feature, index) => (
|
|
<li key={index} className="flex items-center">
|
|
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
|
|
</li>
|
|
))}
|
|
{pkg.limits?.max_photos && <li>• {t('packages.max_photos')} {pkg.limits.max_photos}</li>}
|
|
{pkg.limits?.gallery_days && <li>• {t('packages.gallery_days')} {pkg.limits.gallery_days}</li>}
|
|
{pkg.limits?.max_guests && <li>• {t('packages.max_guests')} {pkg.limits.max_guests}</li>}
|
|
{pkg.watermark_allowed === false && <li><Badge variant="secondary">{t('packages.no_watermark')}</Badge></li>}
|
|
{pkg.branding_allowed && <li><Badge variant="secondary">{t('packages.custom_branding')}</Badge></li>}
|
|
</ul>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => handleCardClick(pkg)}
|
|
className="w-full mt-4 font-sans-marketing"
|
|
>
|
|
{t('packages.view_details')}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Comparison Section for Endcustomer */}
|
|
<div className="mt-12">
|
|
<h3 className="text-2xl font-bold text-center mb-6 font-display">{t('packages.comparison_title')}</h3>
|
|
<div className="block md:hidden">
|
|
<Accordion type="single" collapsible className="w-full">
|
|
<AccordionItem value="price">
|
|
<AccordionTrigger className="font-sans-marketing">{t('packages.price')}</AccordionTrigger>
|
|
<AccordionContent>
|
|
<div className="grid grid-cols-3 gap-4 p-4">
|
|
{endcustomerPackages.map((pkg) => (
|
|
<div key={pkg.id} className="text-center">
|
|
<p className="font-bold">{pkg.name}</p>
|
|
<p>{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('currency.euro')}`}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="max-photos">
|
|
<AccordionTrigger className="font-sans-marketing">{t('packages.max_photos_label')} {getFeatureIcon('max_photos')}</AccordionTrigger>
|
|
<AccordionContent>
|
|
<div className="grid grid-cols-3 gap-4 p-4">
|
|
{endcustomerPackages.map((pkg) => (
|
|
<div key={pkg.id} className="text-center">
|
|
<p className="font-bold">{pkg.name}</p>
|
|
<p>{pkg.limits?.max_photos || t('common.unlimited')}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="max-guests">
|
|
<AccordionTrigger className="font-sans-marketing">{t('packages.max_guests_label')} {getFeatureIcon('max_guests')}</AccordionTrigger>
|
|
<AccordionContent>
|
|
<div className="grid grid-cols-3 gap-4 p-4">
|
|
{endcustomerPackages.map((pkg) => (
|
|
<div key={pkg.id} className="text-center">
|
|
<p className="font-bold">{pkg.name}</p>
|
|
<p>{pkg.limits?.max_guests || t('common.unlimited')}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="gallery-days">
|
|
<AccordionTrigger className="font-sans-marketing">{t('packages.gallery_days_label')} {getFeatureIcon('gallery_days')}</AccordionTrigger>
|
|
<AccordionContent>
|
|
<div className="grid grid-cols-3 gap-4 p-4">
|
|
{endcustomerPackages.map((pkg) => (
|
|
<div key={pkg.id} className="text-center">
|
|
<p className="font-bold">{pkg.name}</p>
|
|
<p>{pkg.limits?.gallery_days || t('common.unlimited')}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
<AccordionItem value="watermark">
|
|
<AccordionTrigger className="font-sans-marketing">{t('packages.watermark_label')} {getFeatureIcon('no_watermark')}</AccordionTrigger>
|
|
<AccordionContent>
|
|
<div className="grid grid-cols-3 gap-4 p-4">
|
|
{endcustomerPackages.map((pkg) => (
|
|
<div key={pkg.id} className="text-center">
|
|
<p className="font-bold">{pkg.name}</p>
|
|
{pkg.watermark_allowed === false ? <Check className="w-4 h-4 text-green-500 mx-auto" /> : <X className="w-4 h-4 text-red-500 mx-auto" />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</div>
|
|
<div className="hidden md:block">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>{t('packages.feature')}</TableHead>
|
|
{endcustomerPackages.map((pkg) => (
|
|
<TableHead key={pkg.id} className="text-center">
|
|
{pkg.name}
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell className="font-semibold">{t('packages.price')}</TableCell>
|
|
{endcustomerPackages.map((pkg) => (
|
|
<TableCell key={pkg.id} className="text-center">
|
|
{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('currency.euro')}`}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-semibold">{t('packages.max_photos_label')} {getFeatureIcon('max_photos')}</TableCell>
|
|
{endcustomerPackages.map((pkg) => (
|
|
<TableCell key={pkg.id} className="text-center">
|
|
{pkg.limits?.max_photos || t('common.unlimited')}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-semibold">{t('packages.max_guests_label')} {getFeatureIcon('max_guests')}</TableCell>
|
|
{endcustomerPackages.map((pkg) => (
|
|
<TableCell key={pkg.id} className="text-center">
|
|
{pkg.limits?.max_guests || t('common.unlimited')}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-semibold">{t('packages.gallery_days_label')} {getFeatureIcon('gallery_days')}</TableCell>
|
|
{endcustomerPackages.map((pkg) => (
|
|
<TableCell key={pkg.id} className="text-center">
|
|
{pkg.limits?.gallery_days || t('common.unlimited')}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-semibold">{t('packages.watermark_label')} {getFeatureIcon('no_watermark')}</TableCell>
|
|
{endcustomerPackages.map((pkg) => (
|
|
<TableCell key={pkg.id} className="text-center">
|
|
{pkg.watermark_allowed === false ? <Check className="w-4 h-4 text-green-500" /> : <X className="w-4 h-4 text-red-500" />}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
|
|
<div className="container mx-auto">
|
|
<h2 className="text-3xl font-bold text-center mb-12 font-display">{t('packages.section_reseller')}</h2>
|
|
|
|
{/* Mobile Carousel for Reseller Packages */}
|
|
<div className="block md:hidden">
|
|
<Carousel className="w-full max-w-md mx-auto" opts={{ loop: true }}>
|
|
<CarouselContent className="-ml-1">
|
|
{resellerPackages.map((pkg) => (
|
|
<CarouselItem key={pkg.id} className="pl-1 basis-full">
|
|
<div
|
|
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
|
|
onTouchStart={(e) => console.log('Touch start on reseller carousel item:', e.touches.length)}
|
|
onTouchMove={(e) => console.log('Touch move on reseller carousel item:', e.touches.length)}
|
|
onTouchEnd={(e) => console.log('Touch end on reseller carousel item')}
|
|
>
|
|
<div className="text-center mb-4">
|
|
<ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-4 font-serif-custom">{pkg.description}</p>
|
|
<p className="text-2xl font-bold text-[#FFD700] mb-4 font-sans-marketing">
|
|
{pkg.price} {t('packages.currency.euro')} / {t('packages.year')}
|
|
</p>
|
|
<ul className="text-sm text-gray-600 dark:text-gray-300 mb-6 space-y-1 font-sans-marketing">
|
|
{pkg.features.map((feature, index) => (
|
|
<li key={index} className="flex items-center">
|
|
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
|
|
</li>
|
|
))}
|
|
{pkg.limits?.max_tenants && <li>• {t('packages.max_tenants')} {pkg.limits.max_tenants}</li>}
|
|
{pkg.limits?.max_events && <li>• {t('packages.max_events_year')} {pkg.limits.max_events}</li>}
|
|
{pkg.branding_allowed && <li><Badge variant="secondary">{t('packages.custom_branding')}</Badge></li>}
|
|
</ul>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => handleCardClick(pkg)}
|
|
className="w-full mt-4 font-sans-marketing"
|
|
>
|
|
{t('packages.view_details')}
|
|
</Button>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
</div>
|
|
|
|
{/* Desktop Grid for Reseller Packages */}
|
|
<div className="hidden md:block">
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{resellerPackages.map((pkg) => (
|
|
<div
|
|
key={pkg.id}
|
|
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
|
|
>
|
|
<div className="text-center mb-4">
|
|
<ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 mb-4 font-serif-custom">{pkg.description}</p>
|
|
<p className="text-2xl font-bold text-[#FFD700] mb-4 font-sans-marketing">
|
|
{pkg.price} {t('packages.currency.euro')} / {t('packages.year')}
|
|
</p>
|
|
<ul className="text-sm text-gray-600 dark:text-gray-300 mb-6 space-y-1 font-sans-marketing">
|
|
{pkg.features.map((feature, index) => (
|
|
<li key={index} className="flex items-center">
|
|
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
|
|
</li>
|
|
))}
|
|
{pkg.limits?.max_tenants && <li>• {t('packages.max_tenants')} {pkg.limits.max_tenants}</li>}
|
|
{pkg.limits?.max_events && <li>• {t('packages.max_events_year')} {pkg.limits.max_events}</li>}
|
|
{pkg.branding_allowed && <li><Badge variant="secondary">{t('packages.custom_branding')}</Badge></li>}
|
|
</ul>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => handleCardClick(pkg)}
|
|
className="w-full mt-4 font-sans-marketing"
|
|
>
|
|
{t('packages.view_details')}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section className="py-20 px-4 dark:bg-gray-700">
|
|
<div className="container mx-auto">
|
|
<h2 className="text-3xl font-bold text-center mb-12 font-display">{t('packages.faq_title')}</h2>
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
|
<h3 className="text-xl font-semibold mb-2 font-display">{t('packages.faq_free')}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{t('packages.faq_free_desc')}</p>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
|
<h3 className="text-xl font-semibold mb-2 font-display">{t('packages.faq_upgrade')}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{t('packages.faq_upgrade_desc')}</p>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
|
<h3 className="text-xl font-semibold mb-2 font-display">{t('packages.faq_reseller')}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{t('packages.faq_reseller_desc')}</p>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
|
<h3 className="text-xl font-semibold mb-2 font-display">{t('packages.faq_payment')}</h3>
|
|
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{t('packages.faq_payment_desc')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Modal */}
|
|
{selectedPackage && (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl font-display">{selectedPackage.name} - {t('packages.details')}</DialogTitle>
|
|
</DialogHeader>
|
|
<Tabs value={currentStep} onValueChange={setCurrentStep} className="w-full">
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="step1">{t('packages.details')}</TabsTrigger>
|
|
<TabsTrigger value="step2">{t('packages.customer_opinions')}</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="step1" className="mt-4">
|
|
<div className="space-y-4">
|
|
<div className="text-center">
|
|
<h2 className="text-3xl font-bold font-display">{selectedPackage.name}</h2>
|
|
<p className="text-2xl font-bold text-[#FFB6C1] mt-2">
|
|
{selectedPackage.price === 0 ? t('packages.free') : `${selectedPackage.price} ${t('packages.currency.euro')}`}
|
|
</p>
|
|
</div>
|
|
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{selectedPackage.description}</p>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{selectedPackage.features.map((feature, index) => (
|
|
<Badge key={`feature-${index}`} variant="secondary" className="flex items-center justify-center gap-1">
|
|
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
|
|
</Badge>
|
|
))}
|
|
{selectedPackage.limits?.max_photos && (
|
|
<Badge variant="outline" className="flex items-center justify-center gap-1">
|
|
<Image className="w-4 h-4" /> {t('packages.max_photos')} {selectedPackage.limits.max_photos}
|
|
</Badge>
|
|
)}
|
|
{selectedPackage.limits?.max_guests && (
|
|
<Badge variant="outline" className="flex items-center justify-center gap-1">
|
|
<Users className="w-4 h-4" /> {t('packages.max_guests')} {selectedPackage.limits.max_guests}
|
|
</Badge>
|
|
)}
|
|
{selectedPackage.limits?.gallery_days && (
|
|
<Badge variant="outline" className="flex items-center justify-center gap-1">
|
|
<Calendar className="w-4 h-4" /> {t('packages.gallery_days')} {selectedPackage.limits.gallery_days}
|
|
</Badge>
|
|
)}
|
|
{selectedPackage.watermark_allowed === false && (
|
|
<Badge variant="secondary" className="flex items-center justify-center gap-1">
|
|
<Shield className="w-4 h-4" /> {t('packages.no_watermark')}
|
|
</Badge>
|
|
)}
|
|
{selectedPackage.branding_allowed && (
|
|
<Badge variant="secondary" className="flex items-center justify-center gap-1">
|
|
<Image className="w-4 h-4" /> {t('packages.custom_branding')}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="text-center">
|
|
<Link
|
|
href={`/purchase-wizard/${selectedPackage.id}`}
|
|
className="w-full block bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition text-center"
|
|
onClick={() => {
|
|
localStorage.setItem('preferred_package', JSON.stringify(selectedPackage));
|
|
}}
|
|
>
|
|
{t('packages.to_order')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="step2" className="mt-4">
|
|
<div className="space-y-4">
|
|
<h3 className="text-xl font-semibold mb-4 font-display">{t('packages.what_customers_say')}</h3>
|
|
<div className="grid md:grid-cols-3 gap-4">
|
|
{testimonials.map((testimonial, index) => (
|
|
<div key={index} className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
|
|
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing mb-2">"{testimonial.text}"</p>
|
|
<p className="font-semibold font-sans-marketing">{testimonial.name}</p>
|
|
<div className="flex">
|
|
{[...Array(testimonial.rating)].map((_, i) => <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" />)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button onClick={() => setOpen(false)} className="w-full mt-4 text-gray-500 dark:text-gray-400 underline">
|
|
{t('packages.close')}
|
|
</button>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
|
|
{/* Testimonials Section entfernt, da nun im Dialog */}
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
export default Packages; |