PricingDefault

代码示例

<template>
  <section class="py-20 mt-16" id="pricing">
    <div class="max-w-7xl mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-12 text-white"> {{ $t('home.pricing.title') }} </h2>
      <div class="flex flex-col md:flex-row md:justify-between gap-8">
        <div class="bg-gray-800 p-8 md:p-12 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 text-center flex flex-col items-center justify-start text-gray-300" style="min-height: 400px; flex: 1;">
          <h3 class="text-xl font-semibold mb-4 text-white">{{ $t('home.pricing.openSource') }}</h3>
          <p class="text-4xl md:text-5xl font-bold mb-4 text-white">{{ $t('home.pricing.free') }}</p>
          <ul class="space-y-3 md:space-y-4 mb-8 md:mb-10 text-left w-full max-w-xs mx-auto">
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.nuxtJSTemplate') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.seoSupports')}}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.stripeAndCreem')}}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.authThird')}}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.i18Support')}}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.zeroPWA')}}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-red-400 text-lg md:text-xl">×</span> {{ $t('home.pricing.backgroundSupport') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-red-400 text-lg md:text-xl">×</span> {{ $t('home.pricing.visualDataAnalysis') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-red-400 text-lg md:text-xl">×</span> {{ $t('home.pricing.IntelligentEmailMarketing') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-red-400 text-lg md:text-xl">×</span> {{ $t('home.pricing.HighDRSiteRecommendation') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-red-400 text-lg md:text-xl">×</span> {{ $t('home.pricing.ExclusiveHighQualityOverseasCommunity') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-red-400 text-lg md:text-xl">×</span> {{ $t('home.pricing.newFeaturesExperience') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-red-400 text-lg md:text-xl">×</span> {{ $t('home.pricing.multiTheme') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-red-400 text-lg md:text-xl">×</span> {{ $t('home.pricing.seoBlog') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-red-400 text-lg md:text-xl">×</span> {{ $t('home.pricing.overboardPdf') }}
            </li>
          </ul>
          <button @click="openGithub" class="w-full bg-yellow-400 text-black py-3 md:py-4 rounded-full relative overflow-hidden group max-w-xs mx-auto mt-auto">
            <span class="relative group-hover:scale-110 transition-transform duration-300 text-sm md:text-base">✨Star✨ to Github.....</span>
          </button>
        </div>

        <div class="bg-gray-800 p-8 md:p-12 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 text-center flex flex-col items-center justify-start text-gray-300" style="min-height: 400px; flex: 1;">
          <h3 class="text-xl font-semibold mb-4 text-white">{{ $t('home.pricing.oneTimePayment') }}</h3>
          <p class="text-4xl md:text-5xl font-bold mb-4 text-white"> {{t('home.pricing.earlyPrice') }}</p>
          <ul class="space-y-3 md:space-y-4 mb-8 md:mb-10 text-left w-full max-w-xs mx-auto">
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{t('home.pricing.permanentAccess') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.allFeaturesIncluded')}}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.backgroundSupport') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.visualDataAnalysis') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.IntelligentEmailMarketing') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.HighDRSiteRecommendation') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.ExclusiveHighQualityOverseasCommunity') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.newFeaturesExperience') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.multiTheme') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.seoBlog') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.overboardPdf') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.freeUpdatesForLife') }}
            </li>
            <li class="flex items-center gap-3">
              <span class="text-yellow-400 text-lg md:text-xl">✓</span> {{ $t('home.pricing.unlimitedCreate') }}
            </li>
          </ul>
          <!-- creem测试产品 -->
          <!-- <button @click="openPayment('prod_5t8s9rmvF8iuvVI4DxCJww', 'onetime',undefined)" class="w-full bg-purple-600 text-white py-3 md:py-4 rounded-full relative overflow-hidden group max-w-xs mx-auto mt-auto">
            <span class="relative group-hover:scale-110 transition-transform duration-300 text-sm md:text-base">{{ $t('home.pricing.buyNow') }}</span>
          </button> -->
          <!-- stripe测试产品 -->
          <button @click="openPayment('prod_Rt62uvdh8wVDay', 'payment','price_1QzJqNBwLqowaPCgkQmDoKXg')" class="w-full bg-purple-600 text-white py-3 md:py-4 rounded-full relative overflow-hidden group max-w-xs mx-auto mt-auto">
            <span class="relative group-hover:scale-110 transition-transform duration-300 text-sm md:text-base">{{ $t('home.pricing.buyNow') }}</span>
          </button>
        </div>
      </div>
    </div>
    <!-- Login Modal -->
    <div v-if="isLoginModalOpen" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-60 flex items-center justify-center" @click.self="closeLoginModal">
        <div class="relative mx-auto p-6 border w-96 shadow-lg rounded-md bg-white">
          <button @click="closeLoginModal" class="absolute top-2 right-2 p-1 border border-gray-300 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">
            <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
          </button>
          <div class="mt-3 text-center">
            <div class="flex justify-center items-center mb-4">
              <img src="xxxxxxx.nuxtpro.png" alt="NuxtPro Logo" class="w-8 h-8 mr-2"/>
              <h3 class="text-lg leading-6 font-medium text-gray-900">{{ $t('auth.selectLoginMethod') }}</h3>
            </div>
            <p class="text-sm text-gray-500 mb-4">{{ $t('auth.selectLoginMethodDescription') }}</p>
            <div class="mt-2 px-7 py-3 space-y-3">
              <button @click="triggerGoogleSignIn" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <img src="xxxxxxxxx.google.png" alt="Google logo" class="w-5 h-5 mr-2"/>
                <span class="ml-2">Sign in with Google</span>
              </button>
              <button @click="triggerGithubSignIn" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <img src="xxxxxxxxx.github.png" alt="GitHub logo" class="w-5 h-5 mr-2"/>
                <span class="ml-2">Sign in with Github</span>
              </button>
            </div>
          </div>
        </div>
      </div>
  </section>
</template>