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 UsersIcon
} from '@heroicons/react/24/outline'; } 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 = () => { const SpecialOffer = () => {
return ( return (
<div className="mt-10 grid grid-cols-2 gap-y-5 xl:grid-cols-3"> <div className="mt-10 grid grid-cols-2 gap-y-5 xl:grid-cols-3">
<div className="flex items-start gap-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"> <div className="flex flex-col">
<span className="font-medium uppercase">Flat Rate Shipping</span> <span className="font-medium uppercase">{config.shippingTitle}</span>
<span className="text-sm font-light"> <span className="mr-2.5 text-sm font-light">{config.shippingText}</span>
We offer a flat $299 shipping fee to commercial addresses
</span>
</div> </div>
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<CurrencyDollarIcon className="size-10 text-primary" /> <CurrencyDollarIcon className="size-10 text-primary" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium uppercase">Best Price Guarantee</span> <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 We will match or beat any competitor&apos;s pricing
</span> </span>
</div> </div>
@ -31,8 +49,8 @@ const SpecialOffer = () => {
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<ShieldCheckIcon className="size-8 text-primary" /> <ShieldCheckIcon className="size-8 text-primary" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium uppercase">Unbeatable Warranty</span> <span className="font-medium uppercase">{config.warrantyTitle}</span>
<span className="text-sm font-light">Up to 5 years with unlimited miles</span> <span className="mr-2.5 text-sm font-light">{config.warrantyText}</span>
</div> </div>
</div> </div>
@ -40,7 +58,7 @@ const SpecialOffer = () => {
<UsersIcon className="size-10 text-primary" /> <UsersIcon className="size-10 text-primary" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium uppercase">Excellent Support</span> <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 End-to-end, expert care from our customer service team
</span> </span>
</div> </div>
@ -50,7 +68,7 @@ const SpecialOffer = () => {
<ArrowPathIcon className="size-10 text-primary" /> <ArrowPathIcon className="size-10 text-primary" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium uppercase">Core Charge Waiver</span> <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 Avoid the core charge by returning within 30 days
</span> </span>
</div> </div>
@ -60,7 +78,7 @@ const SpecialOffer = () => {
<StarIcon className="size-10 text-primary" /> <StarIcon className="size-10 text-primary" />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium uppercase">Free Core Return</span> <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 Unlike competitors, we pay for the return of your core
</span> </span>
</div> </div>