Update marketing packages and checkout copy

2026-02-01 13:04:11 +01:00
parent 386d0004ed
commit 2e78f3ab8d
35 changed files with 136 additions and 157 deletions
--- a/resources/js/pages/marketing/Packages.tsx
+++ b/resources/js/pages/marketing/Packages.tsx
@@ -664,7 +664,7 @@ const resolveServiceTierLabel = (slug: string | null | undefined): string => {
  }

  if (slug === 'standard') {
-    return 'Standard';
+    return 'Classic';
  }

  if (slug === 'pro') {
@@ -784,7 +784,7 @@ function PackageCard({
    : null;

  const displayFeatures = buildDisplayFeatures(pkg, variant);
-  const visibleFeatures = compact ? displayFeatures.slice(0, 3) : displayFeatures.slice(0, 5);
+  const visibleFeatures = displayFeatures.slice(0, 5);
  const metrics = resolvePackageMetrics(pkg, variant, t, tCommon);

  const metricList = (
@@ -1200,18 +1200,6 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
              {t('packages.hero_description')}
            </p>
          </motion.div>
-          <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"
-            >
-              <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.div>
      </section>

@@ -1238,26 +1226,24 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
            <TabsContent value="endcustomer" className="space-y-8 pt-8">
              <div className="md:hidden">
                <div className="relative">
-                  <div className="pointer-events-none absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-white to-transparent dark:from-gray-950" />
-                  <div className="pointer-events-none absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-white to-transparent dark:from-gray-950" />
+                  <div className="pointer-events-none absolute inset-y-0 left-0 w-4 bg-gradient-to-r from-white/70 to-transparent dark:from-gray-950/70" />
+                  <div className="pointer-events-none absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-white/70 to-transparent dark:from-gray-950/70" />
                  <div
                    ref={mobileEndcustomerRef}
                    className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-6"
-                    style={{ scrollPaddingLeft: '16px', scrollBehavior: 'smooth' }}
+                    style={{ scrollPaddingLeft: '16px', scrollPaddingRight: '16px', scrollBehavior: 'smooth' }}
                  >
                    {orderedEndcustomerPackages.map((pkg) => (
-                      <div key={pkg.id} className="snap-start basis-[72vw] shrink-0 sm:basis-[60vw]">
-                        <motion.div 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>
+                      <div key={pkg.id} className="snap-center basis-[64vw] shrink-0 sm:basis-[56vw]">
+                        <PackageCard
+                          pkg={pkg}
+                          variant="endcustomer"
+                          highlight={pkg.id === highlightEndcustomerId}
+                          onSelect={(selected) => handleCardClick(selected, 'endcustomer')}
+                          onCtaClick={handleCtaClick}
+                          className="h-full"
+                          compact
+                        />
                      </div>
                    ))}
                  </div>
@@ -1319,26 +1305,24 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
              </motion.div>
              <div className="md:hidden">
                <div className="relative">
-                  <div className="pointer-events-none absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-white to-transparent dark:from-gray-950" />
-                  <div className="pointer-events-none absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-white to-transparent dark:from-gray-950" />
+                  <div className="pointer-events-none absolute inset-y-0 left-0 w-4 bg-gradient-to-r from-white/70 to-transparent dark:from-gray-950/70" />
+                  <div className="pointer-events-none absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-white/70 to-transparent dark:from-gray-950/70" />
                  <div
                    ref={mobileResellerRef}
                    className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-6"
-                    style={{ scrollPaddingLeft: '16px', scrollBehavior: 'smooth' }}
+                    style={{ scrollPaddingLeft: '16px', scrollPaddingRight: '16px', scrollBehavior: 'smooth' }}
                  >
                    {orderedResellerPackages.map((pkg) => (
-                      <div key={pkg.id} className="snap-start basis-[72vw] shrink-0 sm:basis-[60vw]">
-                        <motion.div variants={revealUp} initial="hidden" whileInView="visible" viewport={viewportOnce}>
-                          <PackageCard
-                            pkg={pkg}
-                            variant="reseller"
-                            highlight={pkg.id === highlightResellerId}
-                            onSelect={(selected) => handleCardClick(selected, 'reseller')}
-                            onCtaClick={handleCtaClick}
-                            className="h-full"
-                            compact
-                          />
-                        </motion.div>
+                      <div key={pkg.id} className="snap-center basis-[64vw] shrink-0 sm:basis-[56vw]">
+                        <PackageCard
+                          pkg={pkg}
+                          variant="reseller"
+                          highlight={pkg.id === highlightResellerId}
+                          onSelect={(selected) => handleCardClick(selected, 'reseller')}
+                          onCtaClick={handleCtaClick}
+                          className="h-full"
+                          compact
+                        />
                      </div>
                    ))}
                  </div>
@@ -1386,6 +1370,19 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
                <PackageComparison packages={orderedResellerPackages} variant="reseller" serviceTierNames={serviceTierNames} />
              </motion.div>
            </TabsContent>
+
+            <div className="flex justify-center pt-2 md:pt-6">
+              <Link
+                href={localizedPath(locale === 'en' ? '/gift-card' : '/gutschein')}
+                className="group inline-flex items-center gap-3 rounded-full border border-gray-200 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-gray-700 shadow-sm transition hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-900/80"
+              >
+                <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>
+            </div>
          </Tabs>
        </div>
      </section>
--- a/resources/js/pages/marketing/tests/Home.render.test.tsx
+++ b/resources/js/pages/marketing/tests/Home.render.test.tsx
@@ -72,7 +72,7 @@ describe('Home', () => {
      <Home
        packages={[
          { id: 1, name: 'Starter', description: 'Desc', price: 29 },
-          { id: 2, name: 'Standard', description: 'Desc', price: 59 },
+          { id: 2, name: 'Classic', description: 'Desc', price: 59 },
        ]}
      />
    );
--- a/resources/js/pages/marketing/tests/Packages.render.test.tsx
+++ b/resources/js/pages/marketing/tests/Packages.render.test.tsx
@@ -104,7 +104,7 @@ describe('Packages', () => {
          },
          {
            id: 2,
-            name: 'Standard',
+            name: 'Classic',
            slug: 'standard',
            description: 'Desc',
            description_breakdown: [],