专题页调整

src/app/(public)/(cms)/payments-pricing/page.tsx

@@ -0,0 +1,306 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function PaymentMethodPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-10">
+      <h1 className="text-center text-2xl font-bold text-black">
+        Payment Method
+      </h1>
+      <div className="my-6"></div>
+
+      <p className="my-4">
+        Payment methods we accept are Paypal, Debit/Credit Card(Visa,
+        Mastercard, American Express, Discover), and buy now pay later payment:
+        afterpay, Klarna.
+      </p>
+      <div className="my-6"></div>
+
+      <p className="my-4">
+        Payment of <strong>PayPal</strong>:
+      </p>
+      <p className="my-2">
+        1. If you have PayPal account, then choose PayPal to complete the
+        payment directly.
+      </p>
+      <p className="my-2">
+        2. If you want to use the PayPal payment method, but you don’t have
+        PayPal account, please register one first.
+      </p>
+      <p className="my-2">
+        3. If you want to use a CARD payment, please choose the PayPal payment
+        method, and choose pay with a credit/debit card
+      </p>
+      <div className="my-6"></div>
+
+      <p className="font-semibold">Note:</p>
+      <p className="my-2">
+        1. At checkout payment, if you click Paypal, that means all transactions
+        are processed through the PayPal site, which is a secure form of
+        payment. You do not need a PayPal account to use Paypal service if card
+        payment prefers.
+      </p>
+      <p className="my-2">
+        2. For international orders, the bank that has issued your credit/debit
+        card determines the exact exchange rate that you will be charged. Please
+        note that we cannot be held responsible for any discrepancies caused by
+        exchange rate fluctuations.
+      </p>
+      <p className="my-2">
+        3. “E-check” payment, if its payment states is “uncleared/pending”, it
+        means we haven't received your payment yet.
+      </p>
+      <p className="my-2">
+        We will wait for the pending states to change to “cleared”, usually,
+        this takes 4-5 days.
+      </p>
+      <p className="my-2">
+        We will check our PayPal account, once we confirm to receive the
+        payment, we will arrange the shipment.
+      </p>
+      <div className="my-6"></div>
+
+      <p className="my-4">
+        Payment of <strong>AFTERPAY/CLEARPAY</strong>:
+      </p>
+      <p className="my-2">
+        Zero interest pay in 4 payment method, available for USA, UK and Canada
+        Clients.
+      </p>
+      <p className="my-2">
+        Clients from United Kingdom, please change currency to GBP, and you're
+        shipping to UK, you will see CLEARPAY payment method at checkout.
+      </p>
+      <div className="my-6"></div>
+
+      <p className="my-4">
+        Payment of <strong>Klarna</strong>:
+      </p>
+
+      <h2 className="text-center text-3xl font-bold text-[#222] mb-5">
+        Shop now, pay later with Klarna!
+      </h2>
+      <p className="my-4">
+        We’ve partnered with Klarna to provide you with easy payment options at
+        checkout, so you can buy what you want when you want.
+      </p>
+
+      <div className="mt-10">
+        <h3 className="text-xl font-bold text-[#222] mb-3">What is Klarna?</h3>
+        <p className="my-4">
+          Klarna is a global payment solutions provider that works with
+          retailers to provide customers with the smoothest online shopping
+          experience. Klarna is in over 170,000 online stores and has more than
+          70 million users globally.
+        </p>
+      </div>
+
+      <div className="mt-10">
+        <h3 className="text-xl font-bold text-[#222] mb-3">
+          How to checkout with Klarna?
+        </h3>
+        <div className="grid grid-cols-4 gap-4 my-6 text-sm">
+          <div className="text-center">
+            <Image
+              src="/image/cms/payment-pricing/157614267181b21ba4c241fd918938b32db02d6199.jpg"
+              alt=""
+              width={60}
+              height={60}
+              className="mx-auto"
+            />
+            <p className="mt-5 text-[#666] max-w-[200px] mx-auto ">
+              Add your favorite items to the cart and select “Klarna” at
+              checkout
+            </p>
+          </div>
+          <div className="text-center">
+            <Image
+              src="/image/cms/payment-pricing/1576142230422aaaf8cda7926bda7da1fd4bc6c176.png"
+              alt=""
+              width={60}
+              height={60}
+              className="mx-auto"
+            />
+            <p className="mt-5 text-[#666] max-w-[200px] mx-auto">
+              Enter basic information and know instantly if you’re approved
+            </p>
+          </div>
+          <div className="text-center">
+            <Image
+              src="/image/cms/payment-pricing/157614223143867fe434ad64523051e81be2a80e0d.png"
+              alt=""
+              width={60}
+              height={60}
+              className="mx-auto"
+            />
+            <p className="mt-5 text-[#666] max-w-[200px] mx-auto">
+              Klarna will send you an email confirmation and payment reminders
+            </p>
+          </div>
+          <div className="text-center">
+            <Image
+              src="/image/cms/payment-pricing/1576142233799b7007130c9bff319f01e67b470cf1.png"
+              alt=""
+              width={60}
+              height={60}
+              className="mx-auto"
+            />
+            <p className="mt-5 text-[#666] max-w-[200px] mx-auto">
+              Complete all future Klarna purchases with just a single click
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-10">
+        <h3 className="text-xl font-bold text-[#222] mb-3">
+          You shop, you choose how to pay.
+        </h3>
+        <h4 className="font-bold mt-5 mb-2">4 interest-free installments</h4>
+        <p className="my-4">
+          Split your purchase into 4 equal payments so you can spread the cost
+          of your purchase over time. Enter the credit or debit card of your
+          choice for automatic payments every two weeks beginning at the time
+          your order is confirmed (usually the shipping date).{" "}
+          <b> No interest or added fees when you pay on time! </b>
+        </p>
+
+        <h4 className="font-bold text-red-600 mt-5 mb-2">
+          Requirements about pay in 4 interest-free installments at Asteria
+          Hair：
+        </h4>
+        <p className="my-2">
+          1. Klarna is only available to customers with a US resident address.
+        </p>
+        <p className="my-2">
+          2. Klarna may only be used on purchases made on www.ASTERIAHAIR.com,
+          and the order value must be between $35 and $1000.
+        </p>
+
+        <div className="grid grid-cols-4 gap-4 my-8">
+          <div className="text-center">
+            <Image
+              src="/image/cms/payment-pricing/1576148318e21c59c09cfa987cf1df3fa3e0fb5d63.png"
+              alt=""
+              width={60}
+              height={60}
+              className="mx-auto"
+            />
+            <p className="mt-5 font-semibold text-[#333]">1st payment</p>
+            <p className="text-[#666] max-w-[200px] mx-auto">
+              Order confirmation
+            </p>
+          </div>
+          <div className="text-center">
+            <Image
+              src="/image/cms/payment-pricing/157614831903d5d04ef35963806b674f35d2b6acc6.png"
+              alt=""
+              width={60}
+              height={60}
+              className="mx-auto"
+            />
+            <p className="mt-5 font-semibold text-[#333]">2nd payment</p>
+            <p className="text-[#666] max-w-[200px] mx-auto">2 weeks later</p>
+          </div>
+          <div className="text-center">
+            <Image
+              src="/image/cms/payment-pricing/1576148320953e32c7b201e6189620dd8e091f0b19.png"
+              alt=""
+              width={60}
+              height={60}
+              className="mx-auto"
+            />
+            <p className="mt-5 font-semibold text-[#333]">3rd payment</p>
+            <p className="text-[#666] max-w-[200px] mx-auto">4 weeks later</p>
+          </div>
+          <div className="text-center">
+            <Image
+              src="/image/cms/payment-pricing/1576148322428ae2eb9accb9c15f37481e0a7f5783.png"
+              alt=""
+              width={60}
+              height={60}
+              className="mx-auto"
+            />
+            <p className="mt-5 font-semibold text-[#333]">Final payment</p>
+            <p className="text-[#666] max-w-[200px] mx-auto">6 weeks later</p>
+          </div>
+        </div>
+        <p className="mt-6">
+          If you do not meet the above payment conditions for Klarna, you can
+          choose other payment options that are available in our store.
+        </p>
+      </div>
+
+      <div className="mt-10">
+        <h3 className="text-xl font-bold text-[#222] mb-3">
+          Returning your order
+        </h3>
+        <p className="my-2">
+          If you return your goods, Klarna will automatically reduce the amount
+          you owe.
+        </p>
+        <p className="my-2">
+          If you already paid for a refunded order, Klarna will refund the
+          balance back to your original payment method.
+        </p>
+      </div>
+
+      <div className="mt-10">
+        <h3 className="text-xl font-bold text-[#222] mb-3">
+          Frequently Asked Questions
+        </h3>
+        <h4 className="font-bold mt-4 mb-1">
+          Will I be notified about my installments?
+        </h4>
+        <p className="my-2">
+          Klarna notifies customers with payment reminders via SMS and email
+          before each payment is due.
+        </p>
+
+        <h4 className="font-bold mt-4 mb-1">
+          When is my first Klarna payment due?
+        </h4>
+        <p className="my-2">
+          Your first payment of 25% of the total purchase price is due at the
+          time of checkout. The remaining three payments will be billed
+          automatically, every two weeks from the first payment date.
+        </p>
+
+        <h4 className="font-bold mt-4 mb-1">
+          Can I pay off my Klarna installments early?
+        </h4>
+        <p className="my-2">
+          Of course! You can log in to Klarna's official website and then choose
+          the order you wish to pay off early on the Customer Portal.
+        </p>
+
+        <h4 className="font-bold mt-4 mb-1">
+          Is there a fee to use Pay later in 30 days or 4 interest-free
+          installments?
+        </h4>
+        <p className="my-2">
+          There are no fees when you follow the payment schedule. Please review
+          product terms for applicable fees.
+        </p>
+      </div>
+
+      <div className="mt-10">
+        <h3 className="text-xl font-bold text-[#222] mb-3">
+          Learn more about Klarna
+        </h3>
+        <p className="my-2">
+          For any more info for Klarna, just click{" "}
+          <Link
+            href="https://www.klarna.com/us/customer-service/"
+            target="_blank"
+            rel="nofollow"
+            className="text-blue-600 hover:underline"
+          >
+            here
+          </Link>
+          .
+        </p>
+      </div>
+    </div>
+  );
+}