crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dynamic USPs

Browse Source 
Signed-off-by: jrphilo <james.philo@me.com>
This commit is contained in:
jrphilo 2024-07-12 09:43:33 +02:00
parent ab3a65b403
commit c577a84fe4
No known key found for this signature in database
GPG Key ID: A8BAD7933F97046F
1 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,23 +7,41 @@ import {
UsersIcon
} from '@heroicons/react/24/outline';
const { STORE_PREFIX } = process.env;
const storeConfig = {
'reman-transmission': {
shippingTitle: 'Flat Rate Shipping',
shippingText: 'We offer a flat $299 shipping fee to commercial addresses',
warrantyTitle: 'Unbeatable Warranty',
warrantyText: 'Up to 5 years with unlimited miles'
},
default: {
shippingTitle: 'Free Shipping',
shippingText: 'We offer free shipping to commercial addresses',
warrantyTitle: 'Standard Warranty',
warrantyText: 'Up to 3 years with unlimited miles'
}
};
const config = storeConfig[STORE_PREFIX] || storeConfig.default;
const SpecialOffer = () => {
return (
<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" />
<TruckIcon className="size-10 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>
<span className="font-medium uppercase">{config.shippingTitle}</span>
<span className="mr-2.5 text-sm font-light">{config.shippingText}</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">
<span className="mr-2.5 text-sm font-light">
We will match or beat any competitor&apos;s pricing
</span>
</div>
@ -31,8 +49,8 @@ const SpecialOffer = () => {
<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>
<span className="font-medium uppercase">{config.warrantyTitle}</span>
<span className="mr-2.5 text-sm font-light">{config.warrantyText}</span>
</div>
</div>
@ -40,7 +58,7 @@ const SpecialOffer = () => {
<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">
<span className="mr-2.5 text-sm font-light">
End-to-end, expert care from our customer service team
</span>
</div>
@ -50,7 +68,7 @@ const SpecialOffer = () => {
<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">
<span className="mr-2.5 text-sm font-light">
Avoid the core charge by returning within 30 days
</span>
</div>
@ -60,7 +78,7 @@ const SpecialOffer = () => {
<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">
<span className="mr-2.5 text-sm font-light">
Unlike competitors, we pay for the return of your core
</span>
</div>