Merge branch 'zzf-contact_us' into dev

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

@@ -0,0 +1,202 @@
+import Image from "next/image";
+
+export default function ContactUsPage() {
+  return (
+    <div className="contact-us-page">
+      {/* Banner */}
+      <div className="contact-us-page-banner w-full">
+        <Image
+          src="/image/cms/contact_us/202503211030.png"
+          alt="Contact Us Banner"
+          width={1440}
+          height={400}
+          className="w-full block"
+        />
+      </div>
+
+      <div className="contact-us-information w-full box-border mx-auto mt-[30px] px-[15px]">
+        <div className="contact-us-top text-center">
+          <div className="text-[24px] font-bold leading-[45px]">
+            We’re Here For Every Queen
+          </div>
+          <div className="w-[80px] h-[4px] bg-black rounded-[4px] mx-auto my-[12px]"></div>
+          <div className="text-[12px] leading-[20px] font-normal">
+            Got questions about our hair tiaras? Need help tracking <br />
+            orders, styling tips, shipping updates, after-sales fixes, <br />
+            or wholesale salon & bulk partnership support? Our <br />
+            dedicated team is standing by to support you every step <br />
+            of the way.
+            {/* Do you need our assistance? ❤️ <br />
+            For product inquiries, order assistance, shipping, after-sales
+            support, or wholesale inquiries, <br />
+            please contact us via the following: */}
+          </div>
+        </div>
+
+        {/* 联系方式卡片组 */}
+        <div className="contact-us-way w-full mt-[30px] flex justify-between items-center">
+          {/* Email */}
+          <div className="w-[108px] h-[130px] flex flex-col items-center p-[10px] box-border rounded-[8px] bg-white shadow-[0px_4px_24px_rgba(0,0,0,0.05)]">
+            <Image
+              src="/image/cms/contact_us/202503201421.png"
+              alt="Email"
+              width={32}
+              height={32}
+            />
+            <div className="text-[12px] leading-[15px] h-[31px] mt-[5px] text-center">
+              Email Support
+            </div>
+            <a
+              href="mailto:service@asteriahair.com"
+              className="mt-[13px] w-[88px] h-[30px] text-center text-[12px] font-normal leading-[30px] text-[white] border bg-[#036141] rounded-[15px]"
+            >
+              Contact
+            </a>
+          </div>
+
+          {/* WhatsApp / Phone */}
+          <div className="w-[108px] h-[130px] flex flex-col items-center p-[10px] box-border rounded-[8px] bg-white shadow-[0px_4px_24px_rgba(0,0,0,0.05)]">
+            <Image
+              src="/image/cms/contact_us/202503201422.png"
+              alt="Phone IM SMS WhatsApp"
+              width={32}
+              height={32}
+            />
+            <div className="text-[12px] leading-[15px] h-[31px] mt-[5px] text-center">
+              WhatsApp
+              <br /> /SMS/Phone
+            </div>
+            <a
+              href="tel:+8616696557019"
+              className="mt-[13px] w-[88px] h-[30px] text-center text-[12px] font-normal leading-[30px] text-[white] border bg-[#036141] rounded-[15px]"
+            >
+              Contact
+            </a>
+          </div>
+
+          {/* Wholesale Service */}
+          <div className="w-[108px] h-[130px] flex flex-col items-center p-[10px] box-border rounded-[8px] bg-white shadow-[0px_4px_24px_rgba(0,0,0,0.05)]">
+            <Image
+              src="/image/cms/contact_us/202503201423.png"
+              alt="Wholesale Service"
+              width={32}
+              height={32}
+            />
+            <div className="text-[12px] leading-[15px] h-[31px] mt-[5px] text-center">
+              Wholesale <br /> Service
+            </div>
+            <a
+              href="tel:+8615238065852"
+              className="mt-[13px] w-[88px] h-[30px] text-center text-[12px] font-normal leading-[30px] text-[white] border bg-[#036141] rounded-[15px]"
+            >
+              Contact
+            </a>
+          </div>
+        </div>
+
+        {/* 工作时间 */}
+        <div className="work-time mt-[30px] text-ly-14 text-center">
+          <div className="mt-[15px] font-medium">
+            · Customer Service Hours 🕒
+          </div>
+          <div className="mt-[15px]">
+            - PST (Pacific Standard Time): 6:30 PM – 3:30 AM
+          </div>
+          <div className="mt-[15px]">
+            - EST (Eastern Standard Time): 9:30 PM – 6:30 AM
+          </div>
+          {/* <div className="mt-[15px]">6:30 PM to 3:30 AM (PST)</div>
+          <div className="mt-[15px]">9:30 PM to 6:30 AM (EST)</div>
+          <div className="mt-[15px]">
+            No worries, queen, we will always reply to your message the moment
+            we see it ❤️
+          </div> */}
+        </div>
+
+        {/* Social Media */}
+        <div className="social-media w-full  bg-[#f5f5f5] p-[20px_24px] box-border mt-[30px] mb-12 rounded-[16px]">
+          <div className="text-center text-[16px] font-bold leading-[20px]">
+            Follow Us
+          </div>
+          <div className="flex items-center justify-center flex-wrap mt-[23px] gap-y-4 gap-x-5.5">
+            <a
+              href="https://www.instagram.com/asteriahaircoupon"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-[144px] h-[114px] flex items-center justify-center flex-col rounded-[12px] border border-black"
+            >
+              <Image
+                src="/image/cms/contact_us/202503211031.png"
+                alt="Instagram"
+                width={36}
+                height={36}
+                className="mb-[9px]"
+              />
+              <div className="text-[12px] leading-[20px]">@Asteria Hair</div>
+            </a>
+            <a
+              href="https://www.instagram.com/asteriahaircoupon"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-[144px] h-[114px] flex items-center justify-center flex-col rounded-[12px] border border-black"
+            >
+              <Image
+                src="/image/cms/contact_us/202503201426.png"
+                alt="Instagram"
+                width={36}
+                height={36}
+                className="mb-[9px]"
+              />
+              <div className="text-[12px] leading-[20px]">
+                @Asteria Hair Store
+              </div>
+            </a>
+
+            <a
+              href="https://www.instagram.com/asteriahaircoupon"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-[144px] h-[114px] flex items-center justify-center flex-col rounded-[12px] border border-black "
+            >
+              <Image
+                src="/image/cms/contact_us/202503211032.png"
+                alt="Instagram"
+                width={36}
+                height={36}
+                className="mb-[9px]"
+              />
+              <div className="text-[12px] leading-[20px]">@ASTERIA HAIR</div>
+            </a>
+
+            <a
+              href="https://www.instagram.com/asteriahaircoupon"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-[144px] h-[114px] flex items-center justify-center flex-col rounded-[12px] border border-black"
+            >
+              <Image
+                src="/image/cms/contact_us/202503201424.png"
+                alt="Instagram"
+                width={36}
+                height={36}
+                className="mb-[9px]"
+              />
+              <div className="text-[12px] leading-[20px] flex items-center justify-center">
+                @asteriahaircoupon
+              </div>
+            </a>
+          </div>
+          <div className="text-center text-[12px] mt-[23px]">
+            Whether you’re shopping for your personal
+            <br />
+            dream wig or growing your salon hair business,
+            <br />
+            we’re thrilled to assist you. Drop us a message
+            <br />
+            anytime!
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}