wholesale专题页调整

src/app/(public)/(cms)/wholesale/page.tsx

@@ -0,0 +1,677 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { useForm, Controller } from "react-hook-form";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Autoplay } from "swiper/modules";
+import Select from "@/components/theme/ui/Select";
+import "swiper/css";
+import "swiper/css/navigation";
+import { useMemo } from "react";
+import { useCustomToast } from "@/utils/hooks/useToast";
+import { clientFetch } from "@/lib/restApiClient";
+
+// 表单类型定义
+type WholesaleFormInput = {
+  name: string;
+  email: string;
+  business_name: string;
+  number: string;
+  country: string;
+  business_role: string;
+  message: string;
+};
+
+export default function WholesalePage() {
+  const {
+    control,
+    handleSubmit,
+    register,
+    reset,
+    formState: { errors },
+  } = useForm<WholesaleFormInput>({
+    defaultValues: {
+      name: "",
+      email: "",
+      business_name: "",
+      number: "",
+      country: "",
+      business_role: "",
+      message: "",
+    },
+  });
+  const addressForm = useForm<WholesaleFormInput>();
+  const { showToast } = useCustomToast();
+  const onSubmit = async (data: WholesaleFormInput) => {
+    try {
+      const res = await clientFetch(`/api/wholesale`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+      console.log("提交成功，返回结果：", res);
+      if (res.success) {
+        reset();
+        showToast(res.message, "success");
+      } else {
+        showToast(res.message, "danger");
+      }
+    } catch (err) {
+      alert("Network error");
+    }
+    console.log("data-------------------------", JSON.stringify(data));
+  };
+
+  // 加载国家下拉脚本并执行
+  const COUNTRIES = [
+    { id: 1, code: "AF", name: "Afghanistan" },
+    { id: 2, code: "AX", name: "Åland Islands" },
+    { id: 3, code: "AL", name: "Albania" },
+    { id: 4, code: "DZ", name: "Algeria" },
+    { id: 49, code: "CN", name: "China" },
+    { id: 244, code: "US", name: "United States" },
+  ];
+  const countriesOptions = useMemo(() => {
+    return COUNTRIES.map((country) => ({
+      value: country.code,
+      label: country.name,
+      id: String(country.id),
+    }));
+  }, [COUNTRIES]);
+
+  const businessRoleOptions = [
+    { value: "Salon Owner", label: "Salon Owner" },
+    { value: "Beauty Supply Store", label: "Beauty Supply Store" },
+    { value: "Boutique", label: "Boutique" },
+    { value: "Hair Stylist", label: "Hair Stylist" },
+    { value: "Wholesaler Hair Business", label: "Wholesaler Hair Business" },
+    { value: "Star New Business", label: "Star New Business" },
+    { value: "Sell Online", label: "Sell Online" },
+    { value: "Personal Use", label: "Personal Use" },
+  ];
+
+  const clientImages = [
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1620180010.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808080.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808081.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808087.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1620180011.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1620180012.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1620180013.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1620180014.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808054.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808057.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808061.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808062.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808063.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808064.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808065.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808066.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808067.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808068.jpg",
+    "https://www.asteriahair.com/media/wysiwyg/wholesale/1609808069.jpg",
+  ];
+
+  return (
+    <div className="wholesale-page">
+      <h1 className="hidden">
+        Wholesale Human Hair Wig Vendors, Bundles Vendors
+      </h1>
+
+      {/* Banner */}
+      <div className="wholesale-banner">
+        <Image
+          src="https://www.asteriahair.com/media/wysiwyg/wholesale/1685493020.png"
+          alt="wholesale banner"
+          width={1920}
+          height={400}
+          className="w-full"
+        />
+      </div>
+
+      {/* Enquiry Form */}
+      <div className="mt-[50px]">
+        <h3 className="text-black text-2xl font-bold text-center leading-10">
+          WHOLESALE HAIR INQUIRY
+        </h3>
+        <span className="block text-center text-sm font-normal text-black leading-5">
+          FILL OUT THE FORM, GET EXCLUSIVE WHOLESALE PRICING INFORMATION!
+        </span>
+
+        <div className="w-[900px] mx-auto mt-[30px] max-w-full px-4">
+          <form onSubmit={handleSubmit(onSubmit)} id="messagee">
+            <ul className="flex flex-wrap gap-x-[27px]">
+              <li className="mt-[2em]">
+                <Controller
+                  name="name"
+                  control={control}
+                  rules={{ required: "Name is required" }}
+                  render={({ field }) => (
+                    <input
+                      {...field}
+                      type="text"
+                      placeholder="* NAME"
+                      className="w-[417px] h-[45px] border border-black rounded px-[10px] box-border max-w-full"
+                    />
+                  )}
+                />
+                {errors.name && (
+                  <p className="text-red-500 mt-1 text-xs">
+                    {errors.name.message}
+                  </p>
+                )}
+              </li>
+
+              <li className="mt-[2em]">
+                <Controller
+                  name="email"
+                  control={control}
+                  rules={{ required: "Email is required" }}
+                  render={({ field }) => (
+                    <input
+                      {...field}
+                      type="email"
+                      placeholder="* EMAIL"
+                      className="w-[417px] h-[45px] border border-black rounded px-[10px] box-border max-w-full"
+                    />
+                  )}
+                />
+                {errors.email && (
+                  <p className="text-red-500 mt-1 text-xs">
+                    {errors.email.message}
+                  </p>
+                )}
+              </li>
+
+              <li className="mt-[2em]">
+                <Controller
+                  name="business_name"
+                  control={control}
+                  render={({ field }) => (
+                    <input
+                      {...field}
+                      type="text"
+                      placeholder=" BUSINESS NAME"
+                      className="w-[417px] h-[45px] border border-black rounded px-[10px] box-border max-w-full"
+                    />
+                  )}
+                />
+              </li>
+
+              <li className="mt-[2em] ">
+                <Controller
+                  name="number"
+                  control={control}
+                  rules={{ required: "Telephone is required" }}
+                  render={({ field }) => (
+                    <input
+                      {...field}
+                      type="text"
+                      placeholder="* TELEPHONE"
+                      className="w-[417px] h-[45px] border border-black rounded px-[10px] box-border max-w-full"
+                    />
+                  )}
+                />
+                {errors.number && (
+                  <p className="text-red-500 mt-1 text-xs">
+                    {errors.number.message}
+                  </p>
+                )}
+              </li>
+
+              <li className="mt-[2em]">
+                <Controller
+                  control={addressForm.control}
+                  name="country"
+                  rules={{ required: "Country is required" }}
+                  render={(
+                    {
+                      // field
+                    },
+                  ) => {
+                    return (
+                      <Select
+                        placeholder="Country/Region"
+                        {...register("country", {
+                          required: "Country/Region field is required",
+                        })}
+                        className="w-[417px] h-[45px] border border-[#767676] rounded px-[10px] box-border max-w-full"
+                        options={countriesOptions}
+                        error={errors.country?.message as string}
+                      />
+                    );
+                  }}
+                />
+              </li>
+
+              <li className="mt-[2em]">
+                <Controller
+                  name="business_role"
+                  control={control}
+                  rules={{ required: "Business Role is required" }}
+                  render={({ field }) => (
+                    <select
+                      {...field}
+                      id="businessRole"
+                      className="w-[417px] h-[45px] border border-[#767676] rounded px-[10px] box-border max-w-full"
+                    >
+                      <option value="" disabled hidden>
+                        Select Your Business Role
+                      </option>
+                      {businessRoleOptions.map((opt) => (
+                        <option key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </option>
+                      ))}
+                    </select>
+                  )}
+                />
+                {errors.business_role && (
+                  <p className="text-red-500 mt-1 text-xs">
+                    {errors.business_role.message}
+                  </p>
+                )}
+              </li>
+
+              <li className="mt-[2em] w-full">
+                <label className="block mb-[10px] text-left">
+                  Messages<span>*</span>
+                </label>
+                <Controller
+                  name="message"
+                  control={control}
+                  rules={{ required: "Message is required" }}
+                  render={({ field }) => (
+                    <textarea
+                      {...field}
+                      placeholder="Hair Bundles/ wigs/ Closure/ Frontal /Others interested? 
+What’s the best way to contact you?"
+                      className="w-[867px] h-[110px] border border-black rounded px-[10px] box-border max-w-full"
+                    />
+                  )}
+                />
+                {errors.message && (
+                  <p className="text-red-500 mt-1 text-xs">
+                    {errors.message.message}
+                  </p>
+                )}
+              </li>
+
+              <li className="mt-[2em] w-full">
+                <div className="text-center mt-[10px]">
+                  <button
+                    type="submit"
+                    className="w-[520px] h-[45px] bg-black text-white rounded border-none max-w-full"
+                  >
+                    Send
+                  </button>
+                </div>
+              </li>
+            </ul>
+          </form>
+        </div>
+      </div>
+
+      {/* Contact info */}
+      <div className="w-[900px] mx-auto mt-[30px] max-w-full px-4">
+        <div className="w-[867px] h-[109px] bg-[#E0FFF5] flex justify-center items-start pt-[17px] mx-auto max-w-full flex-wrap gap-4">
+          <div className="flex justify-center items-start mr-5">
+            <Image
+              src="https://www.asteriahair.com/media/wysiwyg/wholesale/1685493025.png"
+              alt="email icon"
+              width={30}
+              height={30}
+              className="mr-[5px]"
+            />
+            <span>Email:</span>
+            <div className="flex flex-col ml-[10px]">
+              <Link
+                href="mailto:service@asteriahair.com"
+                className="underline text-black"
+              >
+                service@asteriahair.com
+              </Link>
+              <Link
+                href="mailto:pay@asteriahair.com"
+                className="underline text-black"
+              >
+                pay@asteriahair.com
+              </Link>
+            </div>
+          </div>
+          <div className="flex justify-center items-start mr-5">
+            <Image
+              src="https://www.asteriahair.com/media/wysiwyg/wholesale/1685493026.png"
+              alt="whatsapp icon"
+              width={30}
+              height={30}
+              className="mr-[5px]"
+            />
+            <span>WhatsApp:</span>
+            <div className="flex flex-col  ml-[10px]">
+              <Link
+                href="https://wa.me/message/BKUAYBXQ6L3JM1"
+                rel="nofollow"
+                className="underline text-black"
+              >
+                +8615038065852
+              </Link>
+              <Link
+                href="https://wa.me/message/SVMTLNRYWJFJK1"
+                rel="nofollow"
+                className="underline text-black"
+              >
+                +8615136424039
+              </Link>
+            </div>
+          </div>
+          <div className="flex justify-center items-start">
+            <Image
+              src="https://www.asteriahair.com/media/wysiwyg/wholesale/1685493027.png"
+              alt="phone icon"
+              width={30}
+              height={30}
+              className="mr-[5px]"
+            />
+            <span>Phone NO:</span>
+            <div className="flex flex-col  ml-[10px]">
+              <span className="underline cursor-pointer">+8615136424039</span>
+              <span className="underline cursor-pointer">+8615038065852</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Flash sale block hidden original */}
+      <div className="hidden pt-[50px]">
+        <div className="w-[1200px] mx-auto text-center max-w-full px-4">
+          <div className="text-[50px] font-bold uppercase tracking-[6px]">
+            Flash Sale
+          </div>
+          <div className="text-[37px] font-bold text-white bg-black mx-auto my-5 py-[10px] px-[50px] inline-block rounded-[40px]">
+            Straight U Part Bob
+          </div>
+          <div className="text-[25px] font-bold tracking-[2px] leading-[35px]">
+            Natural Black Hair
+          </div>
+          <div className="text-[25px] font-bold tracking-[2px] leading-[35px]">
+            40pack Limited Sale
+          </div>
+          <div className="text-[25px] font-bold tracking-[2px] leading-[35px]">
+            First come first served!
+          </div>
+          <div className="flex justify-between py-[50px] flex-wrap gap-4">
+            <div>
+              <Link href="https://wa.me/message/BKUAYBXQ6L3JM1" rel="nofollow">
+                <Image
+                  src="https://www.asteriahair.com/media/wysiwyg/wholesale/1618986693.jpg"
+                  alt="flash sale"
+                  width={500}
+                  height={500}
+                  className="block max-w-full"
+                />
+              </Link>
+            </div>
+            <div>
+              <Link href="https://wa.me/message/BKUAYBXQ6L3JM1" rel="nofollow">
+                <Image
+                  src="https://www.asteriahair.com/media/wysiwyg/wholesale/1618986694.jpg"
+                  alt="flash sale"
+                  width={500}
+                  height={500}
+                  className="block max-w-full"
+                />
+              </Link>
+            </div>
+          </div>
+          <div className="text-[25px] italic font-semibold inline-block border-b border-black tracking-[2px]">
+            <Link
+              href="https://wa.me/message/BKUAYBXQ6L3JM1"
+              className="no-underline text-black"
+            >
+              WhatsApp to buy!
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* packaged block hidden */}
+      <div className="hidden max-w-[1197px] mx-auto pt-[30px] px-4">
+        <div className="text-center uppercase">
+          <h3 className="text-[40px]">Wholesale Sale</h3>
+          <div className="text-[24px] font-medium mx-auto mb-[5px]">
+            -Start/grow business
+          </div>
+          <div className="text-[16px] tracking-[1px]">-Black Friday Sale</div>
+          <div className="text-[16px] tracking-[1px]">
+            -Best time to buy in bulk and Make profit
+          </div>
+        </div>
+        <div className="pt-[35px] text-center">
+          <Image
+            src="https://www.asteriahair.com/media/wysiwyg/wholesale/1637812702.jpg"
+            alt="wholesale sale"
+            width={1200}
+            height={600}
+            className="max-w-full"
+          />
+        </div>
+      </div>
+
+      {/* Wholesale Products */}
+      <div className="w-[900px] mx-auto mt-[50px] max-w-full px-4">
+        <h3 className="text-black text-2xl font-bold text-center leading-10">
+          WHOLESALE PRODUCTS
+        </h3>
+
+        <div className="w-[867px] mx-auto my-[50px] flex justify-center items-center ">
+          <div className="w-[355px] max-w-full">
+            <Image
+              src="https://www.asteriahair.com/media/wysiwyg/wholesale/1685493021.png"
+              alt="Hair Bundles"
+              width={355}
+              height={300}
+              className="max-w-full"
+            />
+          </div>
+          <div className="w-[512px] bg-[#f5f5f5] p-5 flex flex-col justify-center box-border h-[306px] max-w-full">
+            <h4 className="mb-[10px] text-start text-base font-bold text-black">
+              HAIR BUNDLES
+            </h4>
+            <div className="text-sm font-normal text-black leading-5">
+              Asteria Virgin Hair Bundles are made by machine, double weft.
+              Large <br /> quantity in stock. <br />
+              <span className="font-bold">Textures:</span> Straight, Body Wave,
+              Curly, Deep Wave, Water Wave, Loose Deep, Kinky Curly, Kinky
+              Straight... <br />
+              <span className="font-bold">Hair Length:</span> 8-40inch <br />
+              <span className="font-bold">Weight:</span> 95-105g Each Bundle{" "}
+              <br />
+              All of the hair bundles are full from top to bottom double drawn
+              hair bundles, raw hair bundles can be customized.
+            </div>
+          </div>
+        </div>
+
+        <div className="w-[867px] mx-auto my-[50px] flex justify-center items-center">
+          <div className="w-[512px] bg-[#f5f5f5] p-5 flex flex-col justify-center box-border h-[306px] max-w-full order-2 md:order-1">
+            <h4 className="mb-[10px] text-start text-base font-bold text-black">
+              WIGS
+            </h4>
+            <div className="text-sm font-normal text-black leading-5">
+              All wigs are human hair wigs pre-plucked with baby hair. Large
+              quantity in stock. <br />
+              <span className="font-bold">Textures:</span>Straight, Body Wave,
+              Curly, Deep Wave, Water Wave, Loose Deep, Kinky Curly, Kinky
+              Straight... <br />
+              <span className="font-bold">Wig Type:</span>Lace Wig, U Part Wig,
+              V Part Wig, Headband Wig, Machine-Made Wig... <br />
+              <span className="font-bold">Lace Size:</span> 4*4 Lace, 4*7 Lace,
+              5*5 Lace, 5*9 Lace, 6*6 Lace, 13*4 Lace, 13*6 Lace, 360 Lace, Full
+              Lace... <br />
+              <span className="font-bold">Hair Length:</span> 8-40inch <br />
+              <span className="font-bold">Density:</span>130%, 150%, 180%, 200%,
+              250%... <br />
+              <span className="font-bold">Cap Size:</span>Small, Medium,
+              Large... <br />
+              All of the wigs are with exquisite workmanship, raw hair can be
+              customized.
+            </div>
+          </div>
+          <div className="w-[355px] max-w-full order-1 md:order-2">
+            <Image
+              src="https://www.asteriahair.com/media/wysiwyg/wholesale/1685493022.png"
+              alt="Wigs"
+              width={355}
+              height={300}
+              className="max-w-full"
+            />
+          </div>
+        </div>
+
+        <div className="w-[867px] mx-auto my-[50px] flex justify-center items-center ">
+          <div className="w-[355px] max-w-full">
+            <Link href="https://www.asteriahair.com/asteria-custom-glam-human-hair-mannequin-head-with-shoulders.html">
+              <Image
+                src="https://www.asteriahair.com/media/wysiwyg/wholesale/1685493023.png"
+                alt="Tools & Accessories"
+                width={355}
+                height={300}
+                className="max-w-full"
+              />
+            </Link>
+          </div>
+          <div className="w-[512px] bg-[#f5f5f5] p-5 flex flex-col justify-center box-border h-[306px] max-w-full">
+            <h4 className="mb-[10px] text-start text-base font-bold text-black">
+              TOOLS & ACCESSORIES
+            </h4>
+            <div className="text-sm font-normal text-black leading-5">
+              Many Kinds OF Hair Tools, Asteria Hair Accessory, Magic Handle{" "}
+              <br />
+              Tangle Detangling Comb, Wig Cap, Curling Iron and so on.
+            </div>
+          </div>
+        </div>
+
+        <div className="w-[867px] mx-auto my-[50px] flex justify-center items-center ">
+          <div className="w-[512px] bg-[#f5f5f5] p-5 flex flex-col justify-center box-border h-[306px] max-w-full order-2 md:order-1">
+            <h4 className="mb-[10px] text-start text-base font-bold text-black">
+              BRANDING/PACKAGING CUSTOMIZE
+            </h4>
+            <div className="text-sm font-normal text-black leading-5">
+              Private labels can be customized to support your own business, and
+              you can sell our hair on you site, with your own brand labeled.
+            </div>
+          </div>
+          <div className="w-[355px] max-w-full order-1 md:order-2">
+            <Image
+              src="https://www.asteriahair.com/media/wysiwyg/wholesale/1685493024.png"
+              alt="Branding customize"
+              width={355}
+              height={300}
+              className="max-w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Why choose us */}
+      <div className="w-[1440px] h-[747px] bg-[#F5F5F5] p-[50px_30px_30px] mx-auto max-w-full">
+        <h3 className="text-black text-2xl font-bold text-center leading-10">
+          WHY CHOOSE FROM US?
+        </h3>
+        <div className="w-[1380px] h-[608px] bg-white p-[15px_20px] mt-[30px] mx-auto overflow-auto max-w-full">
+          <div className="my-[23px] text-sm font-normal text-black leading-[26px]">
+            <h4 className="text-[18px] font-bold text-black leading-[26px]">
+              PREMIUM HUMAN HAIR
+            </h4>
+            Each Wig Must Go Through 20 Process Quality Control Inspections, We
+            Can Ensure A Consistent Supply With The Highest Quality Our Hair Is
+            Fuller, And Longer, And Undergoes The Most Advanced Techniques To
+            Achieve The Most Natural Look And Feel Possible. You Can Expect Our
+            Units, Bundles, And Closures To Last For Months And Even Years.
+          </div>
+          <div className="my-[23px] text-sm font-normal text-black leading-[26px]">
+            <h4 className="text-[18px] font-bold text-black leading-[26px]">
+              FACTORY PRICES
+            </h4>
+            We Have Our Own Factory And We’ve Taken Care To Keep Our Prices Fair
+            So That Every Wholesalers Can Benefit From Our Cooperation, So The
+            Factory-Direct Price Is Very Competitive With The Same Quality Hair
+            In The Hair Market. Besides, The More You Buy, The Bigger Discount
+            You Will Enjoy.
+          </div>
+          <div className="my-[23px] text-sm font-normal text-black leading-[26px]">
+            <h4 className="text-[18px] font-bold text-black leading-[26px]">
+              SAFE PAYMENT
+            </h4>
+            To Make It Easy To Pay For Your Bulk Orders, We Accept Paypal,
+            Klarna, Cashapp, Zelle, Credit Card, Bank Transfers, Western Union,
+            Money Gram And So On.
+          </div>
+          <div className="my-[23px] text-sm font-normal text-black leading-[26px]">
+            <h4 className="text-[18px] font-bold text-black leading-[26px]">
+              FAST DELIVERY
+            </h4>
+            We Keep Sufficient Stock On Hand For Your Orders. For In-Stock
+            Orders, 2-5 Days Delivery To Us, 4-7 Days Delivery To European
+            Countries/Canada; And For Custom Orders And Out-Of-Stock Orders,
+            Please Allow 3-5 Business Days Before Shipping. 2 Warehouses In The
+            Us. Bulk Order Enjoy Express Shipping With Signature And Insurance
+            Service Cooperating Couriers: USPS /UPS /FEDEX /DHL.
+          </div>
+          <div className="my-[23px] text-sm font-normal text-black leading-[26px]">
+            <h4 className="text-[18px] font-bold text-black leading-[26px]">
+              CUSTOM PACKAGING
+            </h4>
+            Custom Boxes & Labels Allow You To Differentiate Your Brand.
+          </div>
+          <div className="my-[23px] text-sm font-normal text-black leading-[26px]">
+            <h4 className="text-[18px] font-bold text-black leading-[26px]">
+              POST-SALE GUARANTEE
+            </h4>
+            30 Days No Reason Return, No Worry About The Backlog Of Stock. For
+            Not Hot Selling Products You Can Return It Back To Us To Exchange It
+            To Hot-Selling One.
+          </div>
+        </div>
+      </div>
+
+      {/* Client Review Swiper v12 */}
+      <div className="my-[50px_0_80px]">
+        <h3 className="text-black text-2xl font-bold text-center leading-10">
+          Voice from Clients
+        </h3>
+        <div className="w-[60%] h-full mx-auto mt-[20px] max-w-full">
+          <Swiper
+            modules={[Navigation, Autoplay]}
+            spaceBetween={2}
+            slidesPerView={4}
+            loop
+            autoplay={{
+              delay: 2000,
+              disableOnInteraction: false,
+            }}
+            navigation
+          >
+            {clientImages.map((src, idx) => (
+              <SwiperSlide key={idx}>
+                <div className="text-center">
+                  <Image
+                    src={src}
+                    alt={`client ${idx}`}
+                    width={300}
+                    height={300}
+                    className="mx-auto"
+                  />
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/api/wholesale/route.ts

@@ -0,0 +1,44 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { restApiFetch } from "@/utils/bagisto";
+export async function POST(req: NextRequest) {
+  try {
+    console.log('req---------------------------acacacac',req);
+    
+    const params = await req.json();
+    const response = await restApiFetch<{
+      data: any; // 这个是返回结果的数据类型，暂时写成any，具体看后端反的数据结构再改成确定的类型1
+      variables: {
+        name: string;
+        Email: string;
+        business_name: string;
+        number: string;
+        country: string;
+        business_role: string;
+        message: string;
+      };
+    }>({
+      api: "/wholesale",
+      method: "POST",
+      cache: "no-store",
+      variables: params,
+    });
+    // 打印后端原始返回结构
+    console.log(
+      "接口原始response.body =",
+      JSON.stringify(response.body, null, 2),
+    );
+    return NextResponse.json(response.body, {
+      status: response.status,
+    });
+  } catch (error) {
+    console.log("/customer/token/address---", error); // 调试用
+
+    return NextResponse.json(
+      {
+        message: "Network error",
+        error: error instanceof Error ? error.message : error,
+      },
+      { status: 500 },
+    );
+  }
+}

src/components/theme/ui/Select.tsx

@@ -13,7 +13,8 @@ export default function Select({
     name,
     error,
     ref,
-    autoComplete = "off"
+    autoComplete = "off",
+    className,
 }: {
     placeholder?: string;
     options: Option[];
@@ -23,11 +24,12 @@ export default function Select({
     error?: string;
     ref?: React.Ref<HTMLSelectElement>;
     autoComplete?: string;
+    className?:string;
 }) {
 
     return (
         <div className="w-full relative">
-            <select className="appearance-none ly-input"
+            <select className={`appearance-none ly-input ${className ?? ''}`}
                 onChange={onChange}
                 onBlur={onBlur}
                 name={name}