crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update PDP layout

Browse Source 
Signed-off-by: Chloe <vanguyen.work@gmail.com>
This commit is contained in:
Chloe
2024-06-17 11:04:43 +07:00
parent 3ac4b140c9
commit a11287d4ad
14 changed files with 390 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
components/product/special-offer.tsx
View File

@@ -1,28 +1,71 @@
import { CurrencyDollarIcon, ShieldCheckIcon, UsersIcon } from '@heroicons/react/24/outline';
import { TruckIcon } from '@heroicons/react/24/solid';
import {
ArrowPathIcon,
CurrencyDollarIcon,
ShieldCheckIcon,
StarIcon,
TruckIcon,
UsersIcon
} from '@heroicons/react/24/outline';
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 text-sm tracking-normal text-neutral-800 lg:text-base dark:text-white">
<p className="flex items-center gap-3">
<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-4 w-4 text-secondary lg:h-5 lg:w-5" /> Up to 5 Years
Unlimited Miles Warranty
</p>
<p className="flex items-center gap-3">
<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-4 w-4 text-secondary lg:h-5 lg:w-5" /> No Core Charge for
30 days
</p>
<div className="mt-10 grid grid-cols-2 gap-y-5 xl:grid-cols-3">
<div className="flex items-start gap-3">
<TruckIcon className="size-12 text-primary" />
<div className="flex flex-col">
<span className="font-medium uppercase">Flat Rate Shipping</span>
<span className="text-sm font-light">
We offer a flat $299 shipping fee to commercial addresses
</span>
</div>
</div>
</>
<div className="flex items-start gap-3">
<CurrencyDollarIcon className="size-10 text-primary" />
<div className="flex flex-col">
<span className="font-medium uppercase">Best Price Guarantee</span>
<span className="text-sm font-light">
We will match or beat any competitor&apos;s pricing
</span>
</div>
</div>
<div className="flex items-start gap-3">
<ShieldCheckIcon className="size-8 text-primary" />
<div className="flex flex-col">
<span className="font-medium uppercase">Unbeatable Warranty</span>
<span className="text-sm font-light">Up to 5 years with unlimited miles</span>
</div>
</div>
<div className="flex items-start gap-3">
<UsersIcon className="size-10 text-primary" />
<div className="flex flex-col">
<span className="font-medium uppercase">Excellent Support</span>
<span className="text-sm font-light">
End-to-end, expert care from our customer service team
</span>
</div>
</div>
<div className="flex items-start gap-3">
<ArrowPathIcon className="size-10 text-primary" />
<div className="flex flex-col">
<span className="font-medium uppercase">Core Charge Waiver</span>
<span className="text-sm font-light">
Avoid the core charge by returning within 30 days
</span>
</div>
</div>
<div className="flex items-start gap-3">
<StarIcon className="size-10 text-primary" />
<div className="flex flex-col">
<span className="font-medium uppercase">Free Core Return</span>
<span className="text-sm font-light">
Unlike competitors, we pay for the return of your core
</span>
</div>
</div>
</div>
);
};