Refine packages hero and translations

public/lang/de/marketing.json

@@ -108,16 +108,20 @@
     "standard_support": "Standard-Support",
     "priority_support": "Priorisierter Support",
     "cancel_link": "Paket verwalten: :link",
+    "hero_kicker": "Pakete, die mit eurem Event mitwachsen",
     "hero_title": "Entdecken Sie unsere flexiblen Packages",
     "hero_description": "Von kostenlosem Einstieg bis Premium-Features: Passen Sie Ihr Event-Paket an Ihre Bedürfnisse an. Einfach, sicher und skalierbar.",
     "hero_secondary": "Teste den kompletten Gäste-Flow in unserer Live-Demo – kein Login, kein App-Store.",
     "cta_demo": "Demo ansehen",
     "cta_explore": "Pakete entdecken",
     "cta_explore_highlight": "Lieblingspaket sichern",
+    "gift_cta": "Paket verschenken",
     "tab_endcustomer": "Endkunden",
     "tab_reseller": "Partner / Agentur",
     "section_endcustomer": "Packages für Endkunden (Einmalkauf pro Event)",
     "section_reseller": "Packages für Partner / Agenturen (Event-Kontingent)",
+    "bundles_title": "Partner & Agentur Bundles",
+    "bundles_description": "Event-Kontingente für Profis. Inklusive Partner-Dashboard und priorisiertem Support.",
     "free": "Kostenlos",
     "one_time": "Einmalkauf",
     "subscription": "Event-Kontingent",
@@ -167,7 +171,9 @@
     "feature_photobooth_connect": "Photobooth-Anbindung (Windows, macOS & Linux)",
     "badge_most_popular": "Beliebteste Wahl",
     "badge_best_value": "Bestes Preis-Leistungs-Verhältnis",
+    "badge_recommended": "Empfehlung",
     "badge_starter": "Perfekt für den Start",
+    "events_badge": "{{count}} Events",
     "billing_per_event": "pro Event",
     "billing_per_year": "pro Jahr",
     "billing_per_kontingent": "pro Kontingent",
@@ -199,6 +205,15 @@
     "view_details": "Details",
     "details_show": "Details anzeigen",
     "comparison_title": "Packages vergleichen",
+    "calculator_title": "Noch unschlüssig?",
+    "calculator_description": "Nutzen Sie unseren Kalkulator, um das passende Paket basierend auf Ihrer Gästeanzahl zu finden.",
+    "calculator_question": "Wie viele Gäste erwarten Sie?",
+    "calculator_hint": "Bewegen Sie den Regler und erhalten Sie eine Paket-Empfehlung.",
+    "calculator_min_label": "1 Gast",
+    "calculator_max_label": "{{count}}+ Gäste",
+    "calculator_recommendation": "Wir empfehlen",
+    "calculator_recommendation_hint": "Ideal für bis zu {{count}} Gäste.",
+    "calculator_recommendation_hint_unlimited": "Ideal für Events mit beliebig vielen Gästen.",
     "comparison_subtitle": "Alle Limits und Features auf einen Blick.",
     "comparison_hint": "Wähle deine Zielgruppe und scrolle durch die Karten. Die Tabelle zeigt genaue Unterschiede.",
     "comparison_limits": "Limits",

public/lang/en/marketing.json

@@ -95,16 +95,20 @@
     "unlimited_events": "Unlimited Events",
     "priority_support": "Priority Support",
     "cancel_link": "Manage package: :link",
+    "hero_kicker": "Packages that scale with your event",
     "hero_title": "Discover our flexible Packages",
     "hero_description": "From free entry to premium features: Tailor your event package to your needs. Simple, secure, and scalable.",
     "hero_secondary": "Experience the full guest flow in our live demo – no login, no install.",
     "cta_demo": "View demo",
     "cta_explore": "Discover Packages",
     "cta_explore_highlight": "Explore top packages",
+    "gift_cta": "Gift a package",
     "tab_endcustomer": "End Customers",
     "tab_reseller": "Partner / Agency",
     "section_endcustomer": "Packages for End Customers (One-time purchase per event)",
     "section_reseller": "Packages for Partner / Agencies (Event bundle)",
+    "bundles_title": "Partner & Agency Bundles",
+    "bundles_description": "Event bundles for agencies. Includes partner dashboard and priority support.",
     "free": "Free",
     "one_time": "One-time purchase",
     "subscription": "Event bundle",
@@ -154,8 +158,11 @@
     "feature_photobooth_connect": "Photobooth integration (Windows, macOS & Linux)",
     "badge_most_popular": "Most Popular",
     "badge_best_value": "Best Value",
+    "badge_recommended": "Recommended",
     "badge_starter": "Perfect Starter",
+    "events_badge": "{{count}} events",
     "billing_per_event": "per event",
+    "billing_per_kontingent": "per bundle",
     "billing_per_year": "per year",
     "billing_per_bundle": "per bundle",
     "more_features": "+{{count}} more features",
@@ -185,6 +192,15 @@
     "view_details": "Details",
     "details_show": "Show Details",
     "comparison_title": "Compare Packages",
+    "calculator_title": "Still unsure?",
+    "calculator_description": "Use our calculator to find the right package based on your guest count.",
+    "calculator_question": "How many guests are you expecting?",
+    "calculator_hint": "Move the slider to get a package recommendation.",
+    "calculator_min_label": "1 guest",
+    "calculator_max_label": "{{count}}+ guests",
+    "calculator_recommendation": "We recommend",
+    "calculator_recommendation_hint": "Ideal for up to {{count}} guests.",
+    "calculator_recommendation_hint_unlimited": "Ideal for events with unlimited guests.",
     "comparison_subtitle": "Every limit and feature side by side.",
     "comparison_hint": "Pick your audience and slide through the cards. The table surfaces the fine print.",
     "comparison_limits": "Limits",

resources/js/pages/marketing/Packages.tsx

@@ -14,10 +14,9 @@ import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
 import MarketingLayout from '@/layouts/mainWebsite';
 import { useAnalytics } from '@/hooks/useAnalytics';
-import { useCtaExperiment } from '@/hooks/useCtaExperiment';
 import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
 import { useLocale } from '@/hooks/useLocale';
-import { ArrowRight, Check, Headphones, LayoutGrid, Star } from 'lucide-react';
+import { ArrowRight, Check, Gift, Headphones, LayoutGrid, Star } from 'lucide-react';
 import toast from 'react-hot-toast';
 import { motion, useReducedMotion } from 'framer-motion';
 
@@ -341,10 +340,6 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
   const { t: tCommon } = useTranslation('common');
   const { flash } = usePage<{ flash?: { error?: string } }>().props;
   const shouldReduceMotion = useReducedMotion();
-  const {
-    variant: packagesHeroVariant,
-    trackClick: trackPackagesHeroClick,
-  } = useCtaExperiment('packages_hero_cta');
 
   const viewportOnce = { once: true, amount: 0.25 };
   const revealUp = {
@@ -1187,74 +1182,43 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
 
   return (
     <MarketingLayout title={t('packages.title')}>
-      <section className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 px-4 py-12 md:py-16">
+      <section className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 px-4 py-8 md:py-10">
         <motion.div
-          className="container mx-auto text-center space-y-6 md:space-y-8"
+          className="container mx-auto text-center space-y-4 md:space-y-6"
           variants={stagger}
           initial="hidden"
           animate="visible"
         >
-          <motion.div className="space-y-3 md:space-y-4" variants={revealUp}>
+          <motion.div className="space-y-2 md:space-y-3" variants={revealUp}>
-            <p className="text-xs font-semibold uppercase tracking-[0.35em] text-gray-600 dark:text-gray-300">
+            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-600 dark:text-gray-300">
-              {t('packages.for_endcustomers')} · {t('packages.for_resellers')}
+              {t('packages.hero_kicker')}
             </p>
-            <h1 className="text-3xl font-bold font-display md:text-5xl">
+            <h1 className="text-2xl font-bold font-display md:text-4xl">
               {t('packages.hero_title')}
             </h1>
-            <p className="mx-auto max-w-2xl font-sans-marketing text-base text-gray-700 dark:text-gray-200 md:text-xl">
+            <p className="mx-auto max-w-2xl font-sans-marketing text-sm text-gray-700 dark:text-gray-200 md:text-lg">
               {t('packages.hero_description')}
             </p>
           </motion.div>
-          <motion.div className="flex flex-wrap items-center justify-center gap-3" variants={revealUp}>
+          <motion.div className="flex justify-center md:justify-end" variants={revealUp}>
-            <Button
+            <Link
-              asChild
+              href={localizedPath(locale === 'en' ? '/gift-card' : '/gutschein')}
-              size="lg"
+              className="group inline-flex items-center gap-3 rounded-full border border-white/50 bg-white/70 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-gray-700 shadow-sm backdrop-blur transition hover:bg-white/90 dark:border-gray-800 dark:bg-gray-900/70 dark:text-gray-100"
-              className="rounded-full bg-gray-900 text-white shadow-lg shadow-gray-900/20 hover:bg-gray-800"
-              onClick={() => {
-                trackPackagesHeroClick();
-                trackEvent({
-                  category: 'marketing_packages',
-                  action: 'hero_cta',
-                  name: `scroll:${packagesHeroVariant}`,
-                });
-              }}
             >
-              <a href="#packages-showcase">
+              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-pink-500/15 text-pink-600 dark:text-pink-300">
-                {t('packages.cta_explore')}
+                <Gift className="h-4 w-4" aria-hidden />
-                <ArrowRight className="ml-2 inline h-4 w-4" aria-hidden />
+              </span>
-              </a>
+              <span>{t('packages.gift_cta')}</span>
-            </Button>
+              <ArrowRight className="h-3.5 w-3.5 text-gray-400 transition group-hover:translate-x-1" aria-hidden />
-            <Button
+            </Link>
-              asChild
-              size="lg"
-              variant="outline"
-              className="rounded-full border-white/40 bg-white/30 text-gray-900 backdrop-blur hover:bg-white/50 dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-100"
-            >
-              <Link href={localizedPath('/kontakt')}>
-                {t('packages.contact_us')}
-              </Link>
-            </Button>
-            <Button
-              asChild
-              size="lg"
-              variant="ghost"
-              className="rounded-full text-gray-900 hover:bg-white/60 dark:text-gray-100 dark:hover:bg-gray-800/70"
-            >
-              <Link href={localizedPath(locale === 'en' ? '/gift-card' : '/gutschein')}>
-                {t('packages.gift_cta', 'Paket verschenken')}
-              </Link>
-            </Button>
           </motion.div>
-          <motion.p className="text-sm text-gray-600 dark:text-gray-300" variants={revealUp}>
-            {t('packages.hero_secondary')}
-          </motion.p>
         </motion.div>
       </section>
 
-      <section id="packages-showcase" className="px-4 py-16 md:py-20">
+      <section id="packages-showcase" className="px-4 pt-6 pb-16 md:pt-8 md:pb-20">
         <div className="container mx-auto space-y-12">
           <Tabs defaultValue="endcustomer" className="space-y-8">
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div className="flex justify-center">
               <TabsList className="grid w-full max-w-md grid-cols-2 rounded-full bg-white/90 p-1 shadow-lg shadow-black/10 backdrop-blur dark:bg-gray-900/60">
                 <TabsTrigger
                   className="rounded-full text-xs font-semibold uppercase tracking-[0.2em] text-gray-600 data-[state=active]:bg-gray-900 data-[state=active]:text-white data-[state=active]:shadow-none dark:text-gray-200 dark:data-[state=active]:bg-white dark:data-[state=active]:text-gray-900"
@@ -1269,7 +1233,6 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
                   {t('packages.tab_reseller')}
                 </TabsTrigger>
               </TabsList>
-              <p className="text-sm text-muted-foreground max-w-md">{t('packages.comparison_hint')}</p>
             </div>
 
             <TabsContent value="endcustomer" className="space-y-8">
@@ -1301,25 +1264,32 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
                 </div>
               </div>
               <div className="hidden gap-6 md:grid md:grid-cols-2 xl:grid-cols-3">
-                {orderedEndcustomerPackages.map((pkg) => (
+                {orderedEndcustomerPackages.map((pkg) => {
-                  <motion.div
+                  const isHighlight = pkg.id === highlightEndcustomerId;
-                    key={pkg.id}
+
-                    variants={revealUp}
+                  return (
-                    initial="hidden"
+                    <motion.div
-                    whileInView="visible"
+                      key={pkg.id}
-                    viewport={viewportOnce}
+                      variants={revealUp}
-                  >
+                      initial="hidden"
-                    <PackageCard
+                      whileInView="visible"
-                      pkg={pkg}
+                      viewport={viewportOnce}
-                      variant="endcustomer"
+                    >
-                      highlight={pkg.id === highlightEndcustomerId}
+                      <PackageCard
-                      onSelect={(selected) => handleCardClick(selected, 'endcustomer')}
+                        pkg={pkg}
-                      onCtaClick={handleCtaClick}
+                        variant="endcustomer"
-                      className="h-full"
+                        highlight={isHighlight}
-                      compact
+                        onSelect={(selected) => handleCardClick(selected, 'endcustomer')}
-                    />
+                        onCtaClick={handleCtaClick}
-                  </motion.div>
+                        className={cn(
-                ))}
+                          'h-full',
+                          isHighlight && 'md:scale-[1.08] md:-translate-y-6 md:z-10',
+                        )}
+                        compact={!isHighlight}
+                      />
+                    </motion.div>
+                  );
+                })}
               </div>
               <motion.div variants={revealUp} initial="hidden" whileInView="visible" viewport={viewportOnce}>
                 <PackageComparison packages={orderedEndcustomerPackages} variant="endcustomer" />

resources/lang/de/marketing.json

@@ -43,9 +43,11 @@
   },
   "packages": {
     "title": "Unsere Packages",
+    "hero_kicker": "Pakete, die mit eurem Event mitwachsen",
     "hero_title": "Entdecken Sie unsere flexiblen Packages",
     "hero_description": "Von kostenlosem Einstieg bis Premium-Features: Passen Sie Ihr Event-Paket an Ihre Bedürfnisse an. Einfach, sicher und skalierbar.",
     "cta_explore": "Pakete entdecken",
+    "gift_cta": "Paket verschenken",
     "tab_endcustomer": "Endkunden",
     "tab_reseller": "Partner / Agentur",
     "section_endcustomer": "Packages für Endkunden (Einmalkauf pro Event)",

resources/lang/en/marketing.json

@@ -43,9 +43,11 @@
   },
   "packages": {
     "title": "Our Packages",
+    "hero_kicker": "Packages that scale with your event",
     "hero_title": "Discover our flexible Packages",
     "hero_description": "From free entry to premium features: Tailor your event package to your needs. Simple, secure and scalable.",
     "cta_explore": "Discover Packages",
+    "gift_cta": "Gift a package",
     "tab_endcustomer": "End Customers",
     "tab_reseller": "Partner / Agency",
     "section_endcustomer": "Packages for End Customers (One-time purchase per Event)",