starter about 和pricing模块

2026-05-14 07:26:52 +00:00 · 2024-02-20 12:35:32 +08:00
parent 32621f3065
commit 26bbc449f2
3 changed files with 126 additions and 85 deletions
--- a/themes/starter/components/About.js
+++ b/themes/starter/components/About.js
@@ -1,4 +1,11 @@
+/* eslint-disable @next/next/no-img-element */
 /* eslint-disable react/no-unescaped-entities */
+import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
+
+/**
+ * 首页的关于模块
+ */
 export const About = () => {
  return <>
       {/* <!-- ====== About Section Start --> */}
@@ -9,36 +16,30 @@ export const About = () => {
      <div class="container">
        <div class="wow fadeInUp" data-wow-delay=".2s">
          <div class="-mx-4 flex flex-wrap items-center">
+
+            {/* 左侧的文字说明板块 */}
            <div class="w-full px-4 lg:w-1/2">
              <div class="mb-12 max-w-[540px] lg:mb-0">
                <h2
                  class="mb-5 text-3xl font-bold leading-tight text-dark dark:text-white sm:text-[40px] sm:leading-[1.2]"
                >
-                  Brilliant Toolkit to Build Nextgen Website Faster.
+                  {siteConfig('STARTER_ABOUT_TITLE', null, CONFIG)}
                </h2>
-                <p
-                  class="mb-10 text-base leading-relaxed text-body-color dark:text-dark-6"
-                >
-                  The main ‘thrust' is to focus on educating attendees on how to
-                  best protect highly vulnerable business applications with
-                  interactive panel discussions and roundtables led by subject
-                  matter experts.
-                  <br />
-                  <br />
-                  The main ‘thrust' is to focus on educating attendees on how to
-                  best protect highly vulnerable business applications with
-                  interactive panel.
-                </p>
+                <p class="mb-10 text-base leading-relaxed text-body-color dark:text-dark-6"
+                    dangerouslySetInnerHTML={
+                    { __html: siteConfig('STARTER_ABOUT_TEXT', null, CONFIG) }
+                }></p>

                <a
-
+                  href={siteConfig('STARTER_ABOUT_BUTTON_URL', null, CONFIG)}
                  class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-blue-dark hover:bg-blue-dark"
                >
-                  Know More
+                  {siteConfig('STARTER_ABOUT_BUTTON_TEXT', null, CONFIG)}
                </a>
              </div>
            </div>

+            {/* 右侧的图片海报 */}
            <div class="w-full px-4 lg:w-1/2">
              <div class="-mx-2 flex flex-wrap sm:-mx-4 lg:-mx-2 xl:-mx-4">
                <div class="w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4">
@@ -46,7 +47,7 @@ export const About = () => {
                    class="mb-4 sm:mb-8 sm:h-[400px] md:h-[540px] lg:h-[400px] xl:h-[500px]"
                  >
                    <img
-                      src="/images/starter/about/about-image-01.jpg"
+                      src={siteConfig('STARTER_ABOUT_IMAGE_1', null, CONFIG)}
                      alt="about image"
                      class="h-full w-full object-cover object-center"
                    />
@@ -58,7 +59,7 @@ export const About = () => {
                    class="mb-4 sm:mb-8 sm:h-[220px] md:h-[346px] lg:mb-4 lg:h-[225px] xl:mb-8 xl:h-[310px]"
                  >
                    <img
-                      src="/images/starter/about/about-image-02.jpg"
+                      src={siteConfig('STARTER_ABOUT_IMAGE_2', null, CONFIG)}
                      alt="about image"
                      class="h-full w-full object-cover object-center"
                    />
@@ -69,15 +70,15 @@ export const About = () => {
                  >
                    <div>
                      <span class="block text-5xl font-extrabold text-white">
-                        09
+                        {siteConfig('STARTER_ABOUT_TIPS_1', null, CONFIG)}
                      </span>
                      <span class="block text-base font-semibold text-white">
-                        We have
+                        {siteConfig('STARTER_ABOUT_TIPS_2', null, CONFIG)}
                      </span>
                      <span
                        class="block text-base font-medium text-white text-opacity-70"
                      >
-                        Years of experience
+                        {siteConfig('STARTER_ABOUT_TIPS_3', null, CONFIG)}
                      </span>
                    </div>
                    <div>
--- a/themes/starter/components/Pricing.js
+++ b/themes/starter/components/Pricing.js
@@ -1,3 +1,10 @@
+import { siteConfig } from '@/lib/config'
+import CONFIG from '../config'
+
+/**
+ * 价格板块
+ * @returns
+ */
 export const Pricing = () => {
  return <>
       {/* <!-- ====== Pricing Section Start --> */}
@@ -10,20 +17,21 @@ export const Pricing = () => {
          <div class="w-full px-4">
            <div class="mx-auto mb-[60px] max-w-[510px] text-center">
              <span class="mb-2 block text-lg font-semibold text-primary">
-                Pricing Table
+                {siteConfig('STARTER_PRICING_TITLE', null, CONFIG)}
              </span>
              <h2
                class="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]"
              >
-                Awesome Pricing Plan
+                {siteConfig('STARTER_PRICING_TEXT_1', null, CONFIG)}
              </h2>
              <p class="text-base text-body-color dark:text-dark-6">
-                There are many variations of passages of Lorem Ipsum available
-                but the majority have suffered alteration in some form.
+              {siteConfig('STARTER_PRICING_TEXT_2', null, CONFIG)}
              </p>
            </div>
          </div>
        </div>
+
+        {/* 第一个付费计划 */}
        <div class="-mx-4 flex flex-wrap justify-center">
          <div class="w-full px-4 md:w-1/2 lg:w-1/3">
            <div
@@ -32,98 +40,92 @@ export const Pricing = () => {
              <span
                class="mb-5 block text-xl font-medium text-dark dark:text-white"
              >
-                Starter
+                {siteConfig('STARTER_PRICING_1_TITLE', null, CONFIG)}
              </span>
              <h2
-                class="mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
+                class="space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
              >
-                <span class="text-xl font-medium">$</span>
-                <span class="-ml-1 -tracking-[2px]">25.00</span>
+                <span class="text-xl font-medium">{siteConfig('STARTER_PRICING_1_PRICE_CURRENCY', null, CONFIG)}</span>
+                <span class="-ml-1 -tracking-[2px]">{siteConfig('STARTER_PRICING_1_PRICE', null, CONFIG)}</span>
                <span
                  class="text-base font-normal text-body-color dark:text-dark-6"
                >
-                  Per Month
+                 {siteConfig('STARTER_PRICING_1_PRICE_PERIOD', null, CONFIG)}
                </span>
              </h2>
+
              <div class="mb-[50px]">
                <h5 class="mb-5 text-lg font-medium text-dark dark:text-white">
-                  Features
+                  {siteConfig('STARTER_PRICING_1_HEADER', null, CONFIG)}
                </h5>
                <div class="flex flex-col gap-[14px]">
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    Up to 1 User
-                  </p>
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    All UI components
-                  </p>
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    Lifetime access
-                  </p>
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    Free updates
+                  {siteConfig('STARTER_PRICING_1_FEATURES', null, CONFIG)?.split(',').map((feature, index) => {
+                    return <p key={index} class="text-base text-body-color dark:text-dark-6">
+                    {feature}
                  </p>
+                  })}
+
                </div>
              </div>
              <a
-
+                href={siteConfig('STARTER_PRICING_1_BUTTON_URL')}
                class="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
              >
-                Purchase Now
+                {siteConfig('STARTER_PRICING_1_BUTTON_TEXT', null, CONFIG)}
              </a>
            </div>
          </div>
+
+          {/* 第二个付费计划 */}
          <div class="w-full px-4 md:w-1/2 lg:w-1/3">
            <div
              class="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
            >
-              <p
-                class="absolute right-[-50px] top-[60px] inline-block -rotate-90 rounded-bl-md rounded-tl-md bg-primary px-5 py-2 text-base font-medium text-white"
+              <p style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
+                class="absolute p-1 right-0 top-0 inline-block rounded-bl-md rounded-tl-md bg-primary text-base font-medium text-white tracking-wider"
              >
-                Recommended
+                {siteConfig('STARTER_PRICING_2_TAG', null, CONFIG)}
              </p>
              <span
                class="mb-5 block text-xl font-medium text-dark dark:text-white"
              >
-                Basic
+                {siteConfig('STARTER_PRICING_2_TITLE', null, CONFIG)}
              </span>
              <h2
-                class="mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
+                class="space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
              >
-                <span class="text-xl font-medium">$</span>
-                <span class="-ml-1 -tracking-[2px]">59.00</span>
+                <span class="text-xl font-medium">{siteConfig('STARTER_PRICING_1_PRICE_CURRENCY', null, CONFIG)}</span>
+                <span class="-ml-1 -tracking-[2px]">{siteConfig('STARTER_PRICING_1_PRICE', null, CONFIG)}</span>
                <span
                  class="text-base font-normal text-body-color dark:text-dark-6"
                >
-                  Per Month
+                 {siteConfig('STARTER_PRICING_2_PRICE_PERIOD', null, CONFIG)}
                </span>
              </h2>
+
              <div class="mb-[50px]">
                <h5 class="mb-5 text-lg font-medium text-dark dark:text-white">
-                  Features
+                  {siteConfig('STARTER_PRICING_2_HEADER', null, CONFIG)}
                </h5>
                <div class="flex flex-col gap-[14px]">
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    Up to 1 User
-                  </p>
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    All UI components
-                  </p>
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    Lifetime access
-                  </p>
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    Free updates
+                  {siteConfig('STARTER_PRICING_2_FEATURES', null, CONFIG)?.split(',').map((feature, index) => {
+                    return <p key={index} class="text-base text-body-color dark:text-dark-6">
+                    {feature}
                  </p>
+                  })}
+
                </div>
              </div>
              <a
-
+                href={siteConfig('STARTER_PRICING_2_BUTTON_URL')}
                class="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
              >
-                Purchase Now
+                {siteConfig('STARTER_PRICING_2_BUTTON_TEXT', null, CONFIG)}
              </a>
            </div>
          </div>
+
+          {/* 第三个付费计划 */}
          <div class="w-full px-4 md:w-1/2 lg:w-1/3">
            <div
              class="relative z-10 mb-10 overflow-hidden rounded-xl bg-white px-8 py-10 shadow-pricing dark:bg-dark-2 sm:p-12 lg:px-6 lg:py-10 xl:p-14"
@@ -131,43 +133,38 @@ export const Pricing = () => {
              <span
                class="mb-5 block text-xl font-medium text-dark dark:text-white"
              >
-                Premium
+                {siteConfig('STARTER_PRICING_3_TITLE', null, CONFIG)}
              </span>
              <h2
-                class="mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
+                class="space-x-1 mb-11 text-4xl font-semibold text-dark dark:text-white xl:text-[42px] xl:leading-[1.21]"
              >
-                <span class="text-xl font-medium">$</span>
-                <span class="-ml-1 -tracking-[2px]">99.00</span>
+                <span class="text-xl font-medium">{siteConfig('STARTER_PRICING_3_PRICE_CURRENCY', null, CONFIG)}</span>
+                <span class="-ml-1 -tracking-[2px]">{siteConfig('STARTER_PRICING_3_PRICE', null, CONFIG)}</span>
                <span
                  class="text-base font-normal text-body-color dark:text-dark-6"
                >
-                  Per Month
+                 {siteConfig('STARTER_PRICING_3_PRICE_PERIOD', null, CONFIG)}
                </span>
              </h2>
+
              <div class="mb-[50px]">
                <h5 class="mb-5 text-lg font-medium text-dark dark:text-white">
-                  Features
+                  {siteConfig('STARTER_PRICING_3_HEADER', null, CONFIG)}
                </h5>
                <div class="flex flex-col gap-[14px]">
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    Up to 1 User
-                  </p>
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    All UI components
-                  </p>
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    Lifetime access
-                  </p>
-                  <p class="text-base text-body-color dark:text-dark-6">
-                    Free updates
+                  {siteConfig('STARTER_PRICING_3_FEATURES', null, CONFIG)?.split(',').map((feature, index) => {
+                    return <p key={index} class="text-base text-body-color dark:text-dark-6">
+                    {feature}
                  </p>
+                  })}
+
                </div>
              </div>
              <a
-
+                href={siteConfig('STARTER_PRICING_3_BUTTON_URL')}
                class="inline-block rounded-md bg-primary px-7 py-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
              >
-                Purchase Now
+                {siteConfig('STARTER_PRICING_3_BUTTON_TEXT', null, CONFIG)}
              </a>
            </div>
          </div>
--- a/themes/starter/config.js
+++ b/themes/starter/config.js
@@ -47,6 +47,49 @@ const CONFIG = {
  STARTER_FEATURE_4_BUTTON_TEXT: '了解更多', // 特性4
  STARTER_FEATURE_4_BUTTON_URL: 'https://docs.tangly1024.com/about', // 特性4

+  //   首页ABOUT栏目
+  STARTER_ABOUT_TITLE: '一套轻量实用的建站解决方案',
+  STARTER_ABOUT_TEXT: 'NotionNext的愿景是帮助非技术人员的小白，最低成本、最快速地搭建自己的网站，帮助您将自己的产品与故事高效地传达给世界。 <br /> <br /> 功能强大的Notion笔记，简单快速的Vercel托管平台，组成一个简单的网站',
+  STARTER_ABOUT_BUTTON_TEXT: '了解更多',
+  STARTER_ABOUT_BUTTON_URL: 'https://docs.tangly1024.com/about',
+  STARTER_ABOUT_IMAGE_1: '/images/starter/about/about-image-01.jpg',
+  STARTER_ABOUT_IMAGE_2: '/images/starter/about/about-image-02.jpg',
+  STARTER_ABOUT_TIPS_1: '7000+',
+  STARTER_ABOUT_TIPS_2: '博客站点',
+  STARTER_ABOUT_TIPS_3: '正在线上运行',
+
+  STARTER_PRICING_TITLE: '价格表',
+  STARTER_PRICING_TEXT_1: '很棒的定价计划',
+  STARTER_PRICING_TEXT_2: '我们制定了灵活的付费模式，您可以按需选择。（这里仅做功能展示请勿下单！请勿购买！请勿付费！）',
+
+  STARTER_PRICING_1_TITLE: '入门版',
+  STARTER_PRICING_1_PRICE: '19.9',
+  STARTER_PRICING_1_PRICE_CURRENCY: '$',
+  STARTER_PRICING_1_PRICE_PERIOD: '每月',
+  STARTER_PRICING_1_HEADER: '功能点',
+  STARTER_PRICING_1_FEATURES: '所有的主题,免费更新,帮助手册', // 英文逗号隔开
+  STARTER_PRICING_1_BUTTON_TEXT: '立即购买',
+  STARTER_PRICING_1_BUTTON_URL: 'https://tangly1024.lemonsqueezy.com/checkout/buy/c1a38a65-362e-44c5-8065-733fee39eb54',
+
+  STARTER_PRICING_2_TAG: '推荐',
+  STARTER_PRICING_2_TITLE: '基础版',
+  STARTER_PRICING_2_PRICE: '39.9',
+  STARTER_PRICING_2_PRICE_CURRENCY: '$',
+  STARTER_PRICING_2_PRICE_PERIOD: '每月',
+  STARTER_PRICING_2_HEADER: '功能点',
+  STARTER_PRICING_2_FEATURES: '包含入门版,项目源码,内部社群,技术咨询,SEO优化', // 英文逗号隔开
+  STARTER_PRICING_2_BUTTON_TEXT: '立即购买',
+  STARTER_PRICING_2_BUTTON_URL: 'https://tangly1024.lemonsqueezy.com/checkout/buy/590ad70a-c3b7-4caf-94ec-9ca27bde06d4',
+
+  STARTER_PRICING_3_TITLE: '高级版',
+  STARTER_PRICING_3_PRICE: '59.9',
+  STARTER_PRICING_3_PRICE_CURRENCY: '$',
+  STARTER_PRICING_3_PRICE_PERIOD: '每月',
+  STARTER_PRICING_3_HEADER: '功能点',
+  STARTER_PRICING_3_FEATURES: '包含基础版,功能定制开发', // 英文逗号隔开
+  STARTER_PRICING_3_BUTTON_TEXT: '立即购买',
+  STARTER_PRICING_3_BUTTON_URL: 'https://tangly1024.lemonsqueezy.com/checkout/buy/df924d66-09dc-42a4-a632-a6b0c5cc4f28',
+
  STARTER_NEWSLETTER: process.env.NEXT_PUBLIC_THEME_STARTER_NEWSLETTER || false // 是否开启邮件订阅 请先配置mailchimp功能 https://docs.tangly1024.com/article/notion-next-mailchimp
 }
 export default CONFIG