mirror of
https://github.com/vercel/commerce.git
synced 2025-05-11 12:17:51 +00:00
more design fix
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
parent
589efe5699
commit
951263c7e2
@ -1,4 +1,5 @@
|
||||
import { ChevronDownIcon } from '@heroicons/react/16/solid';
|
||||
import { phoneNumber } from 'lib/constants';
|
||||
import Tooltip from './tooltip';
|
||||
|
||||
function Banner() {
|
||||
@ -6,8 +7,8 @@ function Banner() {
|
||||
<div className="flex min-h-10 w-full flex-col items-center justify-center gap-x-8 bg-primary p-2 text-sm font-medium text-white md:flex-row md:p-0">
|
||||
<span>
|
||||
Speak to a Specialist Now:{' '}
|
||||
<a href={`tel:${8882422605}`} className="ml-1">
|
||||
(888) 242-2605
|
||||
<a href={phoneNumber?.link} className="ml-1">
|
||||
{phoneNumber?.title}
|
||||
</a>
|
||||
</span>
|
||||
<div data-tooltip-id="work-hours-tooltip" className="flex items-center">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { getMetaobject, getMetaobjects } from 'lib/shopify';
|
||||
import { getMetaobject } from 'lib/shopify';
|
||||
import kebabCase from 'lodash.kebabcase';
|
||||
import Image from 'next/image';
|
||||
import { Suspense } from 'react';
|
||||
@ -8,9 +8,26 @@ import ImageDisplay from './page/image-display';
|
||||
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
const Offers = async () => {
|
||||
const offers = await getMetaobjects('usp_item');
|
||||
const offers = [
|
||||
{
|
||||
title: 'Free Shipping (Commercial Address)',
|
||||
icon: 'truck'
|
||||
},
|
||||
{
|
||||
title: 'Up to 5 Years Unlimited Miles Warranty',
|
||||
icon: 'arrow-path-rounded-square'
|
||||
},
|
||||
{
|
||||
title: 'No Core Charge for 30 Days',
|
||||
icon: 'currency-dollar'
|
||||
},
|
||||
{
|
||||
title: 'Excellent Customer Support',
|
||||
icon: 'star'
|
||||
}
|
||||
];
|
||||
|
||||
const Offers = () => {
|
||||
return (
|
||||
<nav aria-label="Offers" className="order-last bg-white lg:order-first">
|
||||
<div className="max-w-8xl mx-auto lg:px-8">
|
||||
@ -23,10 +40,7 @@ const Offers = async () => {
|
||||
key={offer.title}
|
||||
className="flex w-full items-center justify-start px-4 lg:justify-center"
|
||||
>
|
||||
<DynamicHeroIcon
|
||||
icon={offer.icon_name as string}
|
||||
className="size-7 flex-shrink-0 text-secondary"
|
||||
/>
|
||||
<DynamicHeroIcon icon={offer.icon} className="size-7 flex-shrink-0 text-secondary" />
|
||||
<p className="px-3 py-4 text-sm font-medium text-gray-800 md:py-5">{offer.title}</p>
|
||||
</li>
|
||||
))}
|
||||
@ -36,35 +50,6 @@ const Offers = async () => {
|
||||
);
|
||||
};
|
||||
|
||||
const OffersPlaceholder = () => {
|
||||
return (
|
||||
<nav aria-label="Offers" className="order-last bg-white lg:order-first">
|
||||
<div className="max-w-8xl mx-auto lg:px-8">
|
||||
<ul
|
||||
role="list"
|
||||
className="grid animate-pulse grid-cols-1 divide-y divide-gray-200 py-4 md:py-5 lg:grid-cols-4 lg:divide-x lg:divide-y-0"
|
||||
>
|
||||
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
|
||||
<div className="size-7 rounded bg-gray-100" />
|
||||
<div className="h-7 w-1/3 rounded bg-slate-100" />
|
||||
</li>
|
||||
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
|
||||
<div className="size-7 rounded bg-gray-100" />
|
||||
<div className="h-7 w-1/3 rounded bg-slate-100" />
|
||||
</li>
|
||||
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
|
||||
<div className="size-7 rounded bg-gray-100" />
|
||||
<div className="h-7 w-1/3 rounded bg-slate-100" />
|
||||
</li>
|
||||
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
|
||||
<div className="size-7 rounded bg-gray-100" />
|
||||
<div className="h-7 w-1/3 rounded bg-slate-100" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
const HeroImage = async () => {
|
||||
const heroImage = await getMetaobject({
|
||||
handle: { type: 'hero', handle: `${kebabCase(SITE_NAME)}-hero` }
|
||||
@ -98,9 +83,7 @@ const HeroImage = async () => {
|
||||
const Hero = () => {
|
||||
return (
|
||||
<div className="flex flex-col border-b border-gray-200 lg:border-0">
|
||||
<Suspense fallback={<OffersPlaceholder />}>
|
||||
<Offers />
|
||||
</Suspense>
|
||||
<Offers />
|
||||
<div className="relative">
|
||||
{/* Decorative image and overlay */}
|
||||
<div aria-hidden="true" className="absolute inset-0 overflow-hidden">
|
||||
|
||||
@ -2,6 +2,7 @@ import Link from 'next/link';
|
||||
|
||||
import FooterMenu from 'components/layout/footer-menu';
|
||||
import LogoSquare from 'components/logo-square';
|
||||
import { phoneNumber } from 'lib/constants';
|
||||
import { getMenu } from 'lib/shopify';
|
||||
import Image from 'next/image';
|
||||
import { Suspense } from 'react';
|
||||
@ -22,8 +23,8 @@ export default async function Footer() {
|
||||
<Link className="flex items-center text-white md:pt-1" href="/">
|
||||
<LogoSquare dark />
|
||||
</Link>
|
||||
<a href={`tel:${8882422605}`} className="ml-2 text-white">
|
||||
(888) 242-2605
|
||||
<a href={phoneNumber?.link} className="ml-2 text-white">
|
||||
{phoneNumber?.title}
|
||||
</a>
|
||||
<p className="ml-2">Monday - Friday 9:00am - 8:00pm EST</p>
|
||||
<p className="ml-2">Saturday 11:00am - 4:00pm EST</p>
|
||||
|
||||
@ -3,7 +3,7 @@ import Image from 'next/image';
|
||||
const { STORE_PREFIX } = process.env;
|
||||
export default function LogoSquare({ dark = false }: { dark?: boolean }) {
|
||||
return (
|
||||
<>
|
||||
<div className="w-36 sm:w-auto">
|
||||
{dark ? (
|
||||
<Image
|
||||
src={`/${STORE_PREFIX}/dark-logo.svg`}
|
||||
@ -22,6 +22,6 @@ export default function LogoSquare({ dark = false }: { dark?: boolean }) {
|
||||
className="h-full w-full"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { InformationCircleIcon } from '@heroicons/react/20/solid';
|
||||
import { ArrowPathRoundedSquareIcon } from '@heroicons/react/24/outline';
|
||||
import Price from 'components/price';
|
||||
import SideDialog from 'components/side-dialog';
|
||||
import { CORE_VARIANT_ID_KEY, CORE_WAIVER } from 'lib/constants';
|
||||
import { CORE_VARIANT_ID_KEY, CORE_WAIVER, phoneNumber } from 'lib/constants';
|
||||
import { CoreChargeOption, ProductVariant } from 'lib/shopify/types';
|
||||
import { cn, createUrl } from 'lib/utils';
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
||||
@ -119,10 +119,10 @@ const CoreCharge = ({ variants }: CoreChargeProps) => {
|
||||
<div className="md:flex md:justify-between">
|
||||
<p className="mt-1 text-blue-700 md:mt-0">
|
||||
<a
|
||||
href="tel:+18882422605"
|
||||
href={phoneNumber?.link}
|
||||
className="whitespace-nowrap text-blue-700 hover:text-blue-600"
|
||||
>
|
||||
(888) 242-2605
|
||||
{phoneNumber?.title}
|
||||
<span aria-hidden="true"> →</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { InformationCircleIcon, TruckIcon } from '@heroicons/react/24/outline';
|
||||
import Price from 'components/price';
|
||||
import SideDialog from 'components/side-dialog';
|
||||
import { DELIVERY_OPTION_KEY } from 'lib/constants';
|
||||
import { DELIVERY_OPTION_KEY, phoneNumber } from 'lib/constants';
|
||||
import { cn, createUrl } from 'lib/utils';
|
||||
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
||||
import { ReactNode, useState } from 'react';
|
||||
@ -168,10 +168,10 @@ const Delivery = () => {
|
||||
<div className="md:flex md:justify-between">
|
||||
<p className="mt-1 text-blue-700 md:mt-0">
|
||||
<a
|
||||
href="tel:+18882422605"
|
||||
href={phoneNumber?.link}
|
||||
className="whitespace-nowrap text-blue-700 hover:text-blue-600"
|
||||
>
|
||||
(888) 242-2605
|
||||
{phoneNumber?.title}
|
||||
<span aria-hidden="true"> →</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@ -87,3 +87,30 @@ export const URL_PREFIXES = [
|
||||
'/transfer-cases',
|
||||
'/remanufactured-engines'
|
||||
];
|
||||
|
||||
const phoneNumberMap: Record<string, { title: string; link: string }> = {
|
||||
'reman-transmission': {
|
||||
title: '(888) 242-2605',
|
||||
link: 'tel:8882422605'
|
||||
},
|
||||
'car-part-planet': {
|
||||
title: '(888) 412-2772',
|
||||
link: 'tel:8884122772'
|
||||
},
|
||||
'reman-engine': {
|
||||
title: '(877) 343-7352',
|
||||
link: 'tel:8773437352'
|
||||
},
|
||||
'engine-locator': {
|
||||
title: '(302) 966-3140',
|
||||
link: 'tel:3029663140'
|
||||
},
|
||||
'transmission-locator': {
|
||||
title: '(302) 966-3141',
|
||||
link: 'tel:3029663141'
|
||||
}
|
||||
};
|
||||
|
||||
const { STORE_PREFIX } = process.env;
|
||||
|
||||
export const phoneNumber = phoneNumberMap[STORE_PREFIX!];
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<svg width="373" height="40" viewBox="0 0 373 45" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="373" height="45" viewBox="0 0 373 45" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M118.287 15.1261C117.737 21.2791 112.821 25.5417 106.291 25.5417C99.073 25.5417 93.6074 20.3524 93.6074 13.3402C93.6074 6.29424 99.0022 1.13867 105.637 1.13867C108.491 1.13867 110.553 1.96424 112.029 3.33905V1.65423H118.216V11.5206H111.891C111.342 8.83832 109.141 7.0861 106.22 7.0861C102.611 7.0861 100.134 9.80204 100.134 13.3402C100.134 16.8783 102.608 19.5942 106.22 19.5942C109.141 19.5942 111.237 17.8083 111.753 15.1261H118.287Z" fill="#EF6C00"/>
|
||||
<path d="M138.771 19.8324H140.9V25.0216H132.652V24.0579C131.449 24.8835 130.006 25.3653 128.183 25.3653C123.682 25.3653 119.83 21.652 119.83 16.5672C119.83 11.4824 123.678 7.80273 128.183 7.80273C130.006 7.80273 131.449 8.2509 132.652 9.07309V8.21383H140.9V13.4031H138.771V19.8324ZM132.652 19.1787V13.9557C131.553 13.0291 130.522 12.7527 129.491 12.7527C127.429 12.7527 125.848 14.4039 125.848 16.5672C125.848 18.7305 127.429 20.3816 129.491 20.3816C130.522 20.3816 131.553 20.1087 132.652 19.1787Z" fill="#1A1A25"/>
|
||||
<path d="M157.913 14.1955C154.786 14.2629 152.825 14.5729 151.245 14.9166V19.8329H154.749V25.0222H142.959V19.8329H145.126V13.407H142.959V8.21772H151.242V9.96994C152.822 8.83436 154.817 7.94141 157.91 7.94141V14.1955H157.913Z" fill="#1A1A25"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Loading…
x
Reference in New Issue
Block a user