feat: playing around with styles and layout on PDP

Signed-off-by: jrphilo <james.philo@me.com>
This commit is contained in:
jrphilo
2024-05-12 13:39:14 +02:00
parent 80db45a522
commit 598c1ad53e
9 changed files with 98 additions and 51 deletions

View File

@@ -5,18 +5,21 @@ import WarrantySelector from './warranty-selector';
const Warranty = () => {
return (
<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 product</span>
</div>
<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
</Link>
<Link href="#" className="pl-2 text-blue-800 hover:underline">
Terms & Conditions
</Link>
<div className="mb-3 flex flex-row items-center space-x-1 divide-x divide-gray-400 leading-none lg:space-x-3">
<div className="flex flex-row items-center space-x-2 text-base font-medium">
<ShieldCheckIcon className="h-5 w-5" />
<span>Warranty</span>
</div>
<div className="pl-2">
<Link href="#" className="text-xs text-blue-800 hover:underline lg:text-sm">
What&apos;s Included
</Link>
</div>
<div className="pl-2">
<Link href="#" className="text-xs text-blue-800 hover:underline lg:text-sm">
Terms & Conditions
</Link>
</div>
</div>
<WarrantySelector />
</div>