|
|
@@ -0,0 +1,218 @@
|
|
|
+import Image from "next/image";
|
|
|
+
|
|
|
+export default function ContactUsPage() {
|
|
|
+ return (
|
|
|
+ <div className=" p-0 m-auto">
|
|
|
+ {/* Banner */}
|
|
|
+ <div className="w-full">
|
|
|
+ <Image
|
|
|
+ src="/image/cms/contact_us/202503211030.png"
|
|
|
+ alt="Contact us banner"
|
|
|
+ width={1920}
|
|
|
+ height={600}
|
|
|
+ className="w-full block"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="w-[1280px] mx-auto my-[60px] mb-[80px]">
|
|
|
+ <div className="text-center">
|
|
|
+ <h1 className="text-[72px] font-bold leading-[90.72px]">
|
|
|
+ We’re Here For Every Queen
|
|
|
+ </h1>
|
|
|
+ <div className="w-[120px] h-[6px] bg-black rounded-[4px] mx-auto my-[30px]"></div>
|
|
|
+ <div className="text-[16px] leading-[20px] font-normal">
|
|
|
+ Got questions about our hair tiaras? Need help tracking orders,
|
|
|
+ styling tips, shipping updates, after-sales fixes, or wholesale
|
|
|
+ salon & bulk partnership support? Our dedicated team
|
|
|
+ <br />
|
|
|
+ is standing by to support you every step of the way.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 联系方式卡片区域 */}
|
|
|
+ <div className="w-full mt-[60px] flex justify-between items-center">
|
|
|
+ {/* Email */}
|
|
|
+ <div className="w-[400px] h-[310px] flex flex-col items-center py-[40px] pb-[47px] box-border rounded-[16px] bg-white shadow-[0px_6px_36px_rgba(0,0,0,0.05)]">
|
|
|
+ <Image
|
|
|
+ src="/image/cms/contact_us/202503201421.png"
|
|
|
+ alt="Email icon"
|
|
|
+ width={77}
|
|
|
+ height={77}
|
|
|
+ />
|
|
|
+ <div className="text-[16px] leading-[20px] h-[56px] mt-[20px] text-center">
|
|
|
+ Email Support
|
|
|
+ </div>
|
|
|
+ <a
|
|
|
+ href="mailto:service@asteriahair.com"
|
|
|
+ className="mt-[38px] w-[178px] flex items-center justify-between text-[16px] font-bold leading-[20.16px] underline text-[#20a892]"
|
|
|
+ >
|
|
|
+ service@asteriahair.com
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 客服电话/WhatsApp */}
|
|
|
+ <div className="w-[400px] h-[310px] flex flex-col items-center py-[40px] pb-[47px] box-border rounded-[16px] bg-white shadow-[0px_6px_36px_rgba(0,0,0,0.05)]">
|
|
|
+ <Image
|
|
|
+ src="/image/cms/contact_us/202503201422.png"
|
|
|
+ alt="Phone icon"
|
|
|
+ width={77}
|
|
|
+ height={77}
|
|
|
+ />
|
|
|
+ <div className="text-[16px] leading-[20px] h-[56px] mt-[20px] text-center">
|
|
|
+ WhatsApp/SMS/Phone
|
|
|
+ </div>
|
|
|
+ <a
|
|
|
+ href="tel:+8616696557019"
|
|
|
+ className="mt-[38px] w-[178px] flex items-center justify-between text-[16px] font-bold leading-[20.16px] underline text-[#20a892]"
|
|
|
+ >
|
|
|
+ +86 166 9655 7019
|
|
|
+ <svg
|
|
|
+ className="text-[26px]"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="4442"
|
|
|
+ width="26"
|
|
|
+ height="26"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M652.16 469.333333L512 319.445333 571.306667 256 810.666667 512l-239.36 256L512 704.554667 652.16 554.666667H170.666667v-85.333334z"
|
|
|
+ fill="rgba(32, 168, 146, 1)"
|
|
|
+ p-id="4443"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 批发业务 */}
|
|
|
+ <div className="w-[400px] h-[310px] flex flex-col items-center py-[40px] pb-[47px] box-border rounded-[16px] bg-white shadow-[0px_6px_36px_rgba(0,0,0,0.05)]">
|
|
|
+ <Image
|
|
|
+ src="/image/cms/contact_us/202503201423.png"
|
|
|
+ alt="Wholesale icon"
|
|
|
+ width={77}
|
|
|
+ height={77}
|
|
|
+ />
|
|
|
+ <div className="text-[16px] leading-[20px] h-[56px] mt-[20px] text-center">
|
|
|
+ Wholesale Service
|
|
|
+ </div>
|
|
|
+ <a
|
|
|
+ href="tel:+8615238065852"
|
|
|
+ className="w-[178px] flex items-center justify-between text-[16px] font-bold leading-[20.16px] underline text-[#20a892]"
|
|
|
+ >
|
|
|
+ +86 152 3806 5852
|
|
|
+ <svg
|
|
|
+ className="text-[26px]"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="4442"
|
|
|
+ width="26"
|
|
|
+ height="26"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M652.16 469.333333L512 319.445333 571.306667 256 810.666667 512l-239.36 256L512 704.554667 652.16 554.666667H170.666667v-85.333334z"
|
|
|
+ fill="rgba(32, 168, 146, 1)"
|
|
|
+ p-id="4443"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </a>
|
|
|
+ <a
|
|
|
+ href="tel:+8615136424039"
|
|
|
+ className="mt-[16px] w-[178px] flex items-center justify-between text-[16px] font-bold leading-[20.16px] underline text-[#20a892]"
|
|
|
+ >
|
|
|
+ +86 151 3642 4039
|
|
|
+ <svg
|
|
|
+ className="text-[26px]"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="4442"
|
|
|
+ width="26"
|
|
|
+ height="26"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M652.16 469.333333L512 319.445333 571.306667 256 810.666667 512l-239.36 256L512 704.554667 652.16 554.666667H170.666667v-85.333334z"
|
|
|
+ fill="rgba(32, 168, 146, 1)"
|
|
|
+ p-id="4443"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 工作时间 */}
|
|
|
+ <div className="mt-[60px] text-[16px] text-center">
|
|
|
+ <div className="mt-[20px]">Service Working Hours 🕒</div>
|
|
|
+ <div className="mt-[20px]">
|
|
|
+ - PST (Pacific Standard Time): 6:30 PM – 3:30 AM-{" "}
|
|
|
+ </div>
|
|
|
+ <div className="mt-[20px]">
|
|
|
+ EST (Eastern Standard Time): 9:30 PM – 6:30 AM
|
|
|
+ </div>
|
|
|
+ {/* <div className="mt-[20px]">6:30 PM to 3:30 AM (PST)</div>
|
|
|
+ <div className="mt-[20px]">9:30 PM to 6:30 AM (EST)</div>
|
|
|
+ <div className="mt-[20px]">No worries, queen, we will always reply to your message the moment we see it ❤️</div> */}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 社交账号区域 */}
|
|
|
+ <div className="w-full h-[426px] bg-[#f5f5f5] py-[60px] box-border mt-[60px]">
|
|
|
+ <div className="text-center text-[36px] font-bold leading-[48px]">
|
|
|
+ Social Media
|
|
|
+ </div>
|
|
|
+ <div className="flex items-center gap-[96px] justify-center mt-[60px]">
|
|
|
+ <div className="w-[144px] h-[89px] flex flex-col items-center ">
|
|
|
+ <Image
|
|
|
+ src="/image/cms/contact_us/202503211031.png"
|
|
|
+ alt="social icon"
|
|
|
+ width={48}
|
|
|
+ height={48}
|
|
|
+ className="mb-[13px]"
|
|
|
+ />
|
|
|
+ <div className="text-[16px] leading-[20px]">@AsteriaHair</div>
|
|
|
+ </div>
|
|
|
+ <div className="w-[144px] h-[89px] flex flex-col items-center">
|
|
|
+ <Image
|
|
|
+ src="/image/cms/contact_us/202503201426.png"
|
|
|
+ alt="social icon"
|
|
|
+ width={48}
|
|
|
+ height={48}
|
|
|
+ className="mb-[20px]"
|
|
|
+ />
|
|
|
+ <div className="text-[16px] leading-[20px]">
|
|
|
+ Asteria Hair Store
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="w-[144px] h-[89px] flex flex-col items-center">
|
|
|
+ <Image
|
|
|
+ src="/image/cms/contact_us/202503211032.png"
|
|
|
+ alt="social icon"
|
|
|
+ width={48}
|
|
|
+ height={48}
|
|
|
+ className="mb-[20px]"
|
|
|
+ />
|
|
|
+ <div className="text-[16px] leading-[20px]">
|
|
|
+ @ASTERIA HAIR
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="w-[144px] h-[89px] flex flex-col items-center">
|
|
|
+ <Image
|
|
|
+ src="/image/cms/contact_us/202503201424.png"
|
|
|
+ alt="social icon"
|
|
|
+ width={48}
|
|
|
+ height={48}
|
|
|
+ className="mb-[20px]"
|
|
|
+ />
|
|
|
+ <div className="text-[16px] leading-[20px]">
|
|
|
+ @asteriahaircoupon
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="text-center text-[16px] mt-[87px]">
|
|
|
+ Whether you’re shopping for your personal dream wig or growing your salon hair business,<br />
|
|
|
+ we’re thrilled to assist you. Drop us a message anytime!
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
zhangzf
