Refine packages hero and translations

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}>
-            <p className="text-xs font-semibold uppercase tracking-[0.35em] text-gray-600 dark:text-gray-300">
-              {t('packages.for_endcustomers')} · {t('packages.for_resellers')}
+          <motion.div className="space-y-2 md:space-y-3" variants={revealUp}>
+            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-600 dark:text-gray-300">
+              {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}>
-            <Button
-              asChild
-              size="lg"
-              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}`,
-                });
-              }}
+          <motion.div className="flex justify-center md:justify-end" variants={revealUp}>
+            <Link
+              href={localizedPath(locale === 'en' ? '/gift-card' : '/gutschein')}
+              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"
             >
-              <a href="#packages-showcase">
-                {t('packages.cta_explore')}
-                <ArrowRight className="ml-2 inline h-4 w-4" aria-hidden />
-              </a>
-            </Button>
-            <Button
-              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>
+              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-pink-500/15 text-pink-600 dark:text-pink-300">
+                <Gift className="h-4 w-4" aria-hidden />
+              </span>
+              <span>{t('packages.gift_cta')}</span>
+              <ArrowRight className="h-3.5 w-3.5 text-gray-400 transition group-hover:translate-x-1" aria-hidden />
+            </Link>
           </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) => (
-                  <motion.div
-                    key={pkg.id}
-                    variants={revealUp}
-                    initial="hidden"
-                    whileInView="visible"
-                    viewport={viewportOnce}
-                  >
-                    <PackageCard
-                      pkg={pkg}
-                      variant="endcustomer"
-                      highlight={pkg.id === highlightEndcustomerId}
-                      onSelect={(selected) => handleCardClick(selected, 'endcustomer')}
-                      onCtaClick={handleCtaClick}
-                      className="h-full"
-                      compact
-                    />
-                  </motion.div>
-                ))}
+                {orderedEndcustomerPackages.map((pkg) => {
+                  const isHighlight = pkg.id === highlightEndcustomerId;
+
+                  return (
+                    <motion.div
+                      key={pkg.id}
+                      variants={revealUp}
+                      initial="hidden"
+                      whileInView="visible"
+                      viewport={viewportOnce}
+                    >
+                      <PackageCard
+                        pkg={pkg}
+                        variant="endcustomer"
+                        highlight={isHighlight}
+                        onSelect={(selected) => handleCardClick(selected, 'endcustomer')}
+                        onCtaClick={handleCtaClick}
+                        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" />