fix: update dark text color and fix responsive issues

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/product/[handle]/page.tsx

@@ -83,7 +83,9 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <BreadcrumbComponent type="product" handle={product.handle} />
+        <div className="hidden lg:block">
+          <BreadcrumbComponent type="product" handle={product.handle} />
+        </div>
         <div className="my-3 flex flex-col space-x-0 rounded-lg border border-neutral-200 bg-white p-8 md:p-10 lg:flex-row lg:gap-8 lg:space-x-3 dark:border-neutral-800 dark:bg-black">
           <div className="h-full w-full basis-full lg:basis-7/12">
             <Suspense

components/product/gallery.tsx

@@ -62,7 +62,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
                 </Link>
               </div>
             </div>
-            <p className="absolute bottom-[5%] flex w-full justify-center text-sm text-neutral-500">
+            <p className="absolute bottom-[5%] flex w-full justify-center text-xs text-neutral-500">
               Representative Image
             </p>
           </>

components/product/special-offer.tsx

@@ -5,19 +5,21 @@ const SpecialOffer = () => {
   return (
     <>
       <div className="mb-3 text-base font-medium tracking-tight">Special Offers</div>
-      <div className="flex flex-col space-y-2 pl-2 tracking-normal text-neutral-800">
+      <div className="flex flex-col space-y-2 pl-2 text-sm tracking-normal text-neutral-800 lg:text-base dark:text-white">
         <p className="flex items-center gap-3">
-          <TruckIcon className="h-5 w-5 text-secondary" /> Flat Rate Shipping (Commercial Address)
+          <TruckIcon className="h-4 w-4 text-secondary lg:h-5 lg:w-5" /> Flat Rate Shipping
+          (Commercial Address)
         </p>
         <p className="flex items-center gap-3">
-          <ShieldCheckIcon className="h-5 w-5 text-secondary" /> Up to 5 Years Unlimited Miles
+          <ShieldCheckIcon className="h-4 w-4 text-secondary lg:h-5 lg:w-5" /> Up to 5 Years
-          Warranty
+          Unlimited Miles Warranty
         </p>
         <p className="flex items-center gap-3">
-          <UsersIcon className="h-5 w-5 text-secondary" /> Excellent Customer Support
+          <UsersIcon className="h-4 w-4 text-secondary lg:h-5 lg:w-5" /> Excellent Customer Support
         </p>
         <p className="flex items-center gap-3">
-          <CurrencyDollarIcon className="h-5 w-5 text-secondary" /> No Core Charge for 30 days
+          <CurrencyDollarIcon className="h-4 w-4 text-secondary lg:h-5 lg:w-5" /> No Core Charge for
+          30 days
         </p>
       </div>
     </>

components/product/warranty-selector.tsx

@@ -42,7 +42,7 @@ const WarrantySelector = () => {
           key={plan.key}
           onClick={() => setSelectedOptions(plan.key)}
           className={cn(
-            'flex  w-32 cursor-pointer flex-col items-center justify-center space-y-2 rounded-md border p-2 text-xs font-medium',
+            'flex  w-32 cursor-pointer flex-col items-center justify-center space-y-2 rounded-md border p-2 text-center text-xs font-medium',
             { 'ring-2 ring-secondary': plan.key === selectedOptions }
           )}
         >

components/product/warranty.tsx

@@ -8,12 +8,12 @@ type WarrantyProps = {
 
 const Warranty = ({ productType }: WarrantyProps) => {
   return (
-    <div className="flex flex-col text-sm">
+    <div className="flex flex-col text-xs lg:text-sm">
       <div className="mb-3 flex flex-row items-center space-x-2 text-base font-medium">
         <ShieldCheckIcon className="h-7 w-7" />
         <span> Protect your {productType ?? 'product'}</span>
       </div>
-      <div className="mb-1 flex flex-row items-center space-x-3 divide-x divide-gray-400 leading-none">
+      <div className="mb-1 flex flex-row items-center space-x-1 divide-x divide-gray-400 leading-none lg:space-x-3">
         <span>Extended Warranty</span>
         <Link href="#" className="pl-2 text-blue-800 hover:underline">
           What&apos;s Included