mirror of
https://github.com/vercel/commerce.git
synced 2025-05-12 20:57:51 +00:00
change a bunch of stuff to get biz on brand
This commit is contained in:
druzydowns
parent
cf49ed9c18
commit
f8576f5118
BIN
app/OTJubilee-Platinum.ttf
Normal file
BIN
app/OTJubilee-Platinum.ttf
Normal file
Binary file not shown.
@ -31,7 +31,18 @@ export async function generateMetadata({
|
||||
export default async function Page({ params }: { params: { page: string } }) {
|
||||
const page = await getPage(params.page);
|
||||
|
||||
if (!page) return notFound();
|
||||
if (page.handle == 'small-sizes')
|
||||
return (
|
||||
<>
|
||||
<div className="relative">
|
||||
<div className="fixed left-0 top-0 flex h-screen w-screen items-center justify-center bg-[#0f1214]">
|
||||
<div className="">
|
||||
<img src="/no.png" className="scale-90 border border-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -9,7 +9,7 @@ export default function Error({ reset }: { reset: () => void }) {
|
||||
action again.
|
||||
</p>
|
||||
<button
|
||||
className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
|
||||
className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-black p-4 tracking-wide text-white hover:opacity-90"
|
||||
onClick={() => reset()}
|
||||
>
|
||||
Try Again
|
||||
|
||||
@ -19,3 +19,14 @@ input,
|
||||
button {
|
||||
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
|
||||
}
|
||||
|
||||
.cls-1 {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 0.5px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import clsx from 'clsx';
|
||||
import Navbar from 'components/layout/navbar';
|
||||
import { GeistSans } from 'geist/font';
|
||||
import { ensureStartsWith } from 'lib/utils';
|
||||
import localFont from 'next/font/local';
|
||||
import { ReactNode, Suspense } from 'react';
|
||||
import './globals.css';
|
||||
|
||||
@ -31,9 +33,14 @@ export const metadata = {
|
||||
})
|
||||
};
|
||||
|
||||
const jubilee = localFont({
|
||||
src: './OTJubilee-Platinum.ttf',
|
||||
display: 'swap'
|
||||
});
|
||||
|
||||
export default async function RootLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<html lang="en" className={GeistSans.variable}>
|
||||
<html lang="en" className={clsx(GeistSans.variable, jubilee.className)}>
|
||||
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
|
||||
<Navbar />
|
||||
<Suspense>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { CarouselPrints } from 'components/carouselPrints';
|
||||
import { ThreeItemGrid } from 'components/grid/three-items';
|
||||
import { HomepageShirts } from 'components/grid/homepageShirts';
|
||||
import Footer from 'components/layout/footer';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
@ -15,7 +15,7 @@ export const metadata = {
|
||||
export default async function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<ThreeItemGrid />
|
||||
<HomepageShirts />
|
||||
<Suspense>
|
||||
<CarouselPrints />
|
||||
<Suspense>
|
||||
|
||||
@ -114,7 +114,7 @@ async function RelatedProducts({ id }: { id: string }) {
|
||||
|
||||
return (
|
||||
<div className="py-8">
|
||||
<h2 className="mb-4 text-2xl font-bold">Related Products</h2>
|
||||
<h2 className="mb-4 text-2xl font-bold">More Big Tees</h2>
|
||||
<ul className="flex w-full gap-4 overflow-x-auto pt-1">
|
||||
{relatedProducts.map((product) => (
|
||||
<li
|
||||
@ -129,6 +129,8 @@ async function RelatedProducts({ id }: { id: string }) {
|
||||
amount: product.priceRange.maxVariantPrice.amount,
|
||||
currencyCode: product.priceRange.maxVariantPrice.currencyCode
|
||||
}}
|
||||
sparkles={false}
|
||||
available={product.availableForSale}
|
||||
src={product.featuredImage?.url}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
|
||||
|
||||
@ -2,8 +2,7 @@ import { getCollection, getCollectionProducts } from 'lib/shopify';
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
import Grid from 'components/grid';
|
||||
import ProductGridItems from 'components/layout/product-grid-items';
|
||||
import { ShirtGridItem } from 'components/grid/homepageShirts';
|
||||
import { defaultSort, sorting } from 'lib/constants';
|
||||
|
||||
export const runtime = 'edge';
|
||||
@ -36,13 +35,16 @@ export default async function CategoryPage({
|
||||
const products = await getCollectionProducts({ collection: params.collection, sortKey, reverse });
|
||||
|
||||
return (
|
||||
<section>
|
||||
<section className="mx-auto grid max-w-screen-2xl gap-4 gap-y-32 px-4 pb-24 md:grid-cols-3 md:grid-rows-2 md:gap-y-16">
|
||||
{products.length === 0 ? (
|
||||
<p className="py-3 text-lg">{`No products found in this collection`}</p>
|
||||
) : (
|
||||
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<ProductGridItems products={products} />
|
||||
</Grid>
|
||||
// <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
||||
// <ProductGridItems products={products} />
|
||||
// </Grid>
|
||||
products.map((product) => (
|
||||
<ShirtGridItem key={product.id} size="third" item={product} priority={true} />
|
||||
))
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -17,13 +17,13 @@ function SubmitButton({
|
||||
}) {
|
||||
const { pending } = useFormStatus();
|
||||
const buttonClasses =
|
||||
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
|
||||
'relative flex w-full items-center justify-center bg-black p-4 tracking-wide text-white';
|
||||
const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
|
||||
|
||||
if (!availableForSale) {
|
||||
return (
|
||||
<button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
|
||||
Out Of Stock
|
||||
Sold Out
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@ -38,7 +38,7 @@ function SubmitButton({
|
||||
<div className="absolute left-0 ml-4">
|
||||
<PlusIcon className="h-5" />
|
||||
</div>
|
||||
Add To Cart
|
||||
Select a size above
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@ -176,7 +176,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
|
||||
</div>
|
||||
<a
|
||||
href={cart.checkoutUrl}
|
||||
className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
|
||||
className="block w-full bg-black p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
|
||||
>
|
||||
Proceed to Checkout
|
||||
</a>
|
||||
|
||||
@ -15,7 +15,7 @@ export default function OpenCart({
|
||||
/>
|
||||
|
||||
{quantity ? (
|
||||
<div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-600 text-[11px] font-medium text-white">
|
||||
<div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-black text-[11px] font-medium text-white">
|
||||
{quantity}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
95
components/grid/homepageShirts.tsx
Normal file
95
components/grid/homepageShirts.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
import clsx from 'clsx';
|
||||
import { GridTileImage } from 'components/grid/tile';
|
||||
import { getCollectionProducts } from 'lib/shopify';
|
||||
import type { Product } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
|
||||
export function ShirtGridItem({
|
||||
item,
|
||||
size,
|
||||
priority
|
||||
}: {
|
||||
item: Product;
|
||||
size: 'full' | 'half' | 'third' | 'quarter';
|
||||
priority?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={clsx('cursor-pointer', {
|
||||
'md:col-span-4 md:row-span-2': size === 'full',
|
||||
'md:col-span-1 md:row-span-1': size != 'full'
|
||||
})}
|
||||
>
|
||||
<Link className="relative block aspect-square h-full w-full" href={`/product/${item.handle}`}>
|
||||
<GridTileImage
|
||||
src={item.featuredImage.url}
|
||||
fill
|
||||
sizes={
|
||||
size === 'full' ? '(min-width: 768px) 66vw, 100vw' : '(min-width: 768px) 33vw, 100vw'
|
||||
}
|
||||
priority={priority}
|
||||
alt={item.title}
|
||||
label={{
|
||||
position: size === 'full' ? 'center' : 'bottom',
|
||||
title: item.title as string,
|
||||
amount: item.priceRange.maxVariantPrice.amount,
|
||||
currencyCode: item.priceRange.maxVariantPrice.currencyCode
|
||||
}}
|
||||
sparkles={true}
|
||||
available={item.availableForSale}
|
||||
/>
|
||||
<div className="absolute -bottom-12 z-10 h-fit w-full select-none opacity-100 lg:hidden ">
|
||||
{item.title && (
|
||||
<h3 className="line-clamp-2 text-center text-4xl tracking-tight">{item.title}</h3>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function HomepageShirts() {
|
||||
// Collections that start with `hidden-*` are hidden from the search page.
|
||||
const homepageItems = await getCollectionProducts({
|
||||
collection: 'shirts'
|
||||
});
|
||||
|
||||
if (!homepageItems[0] || homepageItems.length <= 0) return null;
|
||||
|
||||
const [firstProduct, secondProduct, thirdProduct, fourthProduct] = homepageItems;
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="mx-auto max-w-screen-2xl justify-center pb-12">
|
||||
<div className="space-y-4 p-6 py-4 lg:p-12">
|
||||
<h3 className="text-center text-lg lg:text-2xl">
|
||||
Presenting the latest season of extra-large garments from Okay XL...
|
||||
</h3>
|
||||
<p className="text-center text-4xl lg:text-5xl">
|
||||
“ Fake Anime Shows Your Friends Have Never Heard Of ”
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section className="mx-auto grid max-w-screen-2xl gap-4 gap-y-32 px-4 pb-24 md:grid-cols-3 md:grid-rows-2 md:gap-y-16">
|
||||
{homepageItems.map((product) => (
|
||||
<ShirtGridItem key={product.id} size="third" item={product} priority={true} />
|
||||
))}
|
||||
</section>
|
||||
<section className="mx-auto max-w-screen-2xl justify-center p-6 py-4 lg:p-12">
|
||||
<h3 className="text-3xl lg:text-left lg:text-5xl">
|
||||
Okay XL only offers t-shirt sizes XL and up....
|
||||
</h3>
|
||||
<p className="max-w-3xl font-sans">
|
||||
I made the decision to exclusively stock sizes XL & up because, I can.
|
||||
</p>
|
||||
<p className="max-w-3xl font-sans">
|
||||
You won't find any t-shirts listed for sale on this site smaller than XL but, if you want
|
||||
to request a smaller size{' '}
|
||||
<Link className="cursor-pointer underline" href={'/small-sizes'}>
|
||||
you can find more information here.
|
||||
</Link>
|
||||
</p>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,11 +1,13 @@
|
||||
import clsx from 'clsx';
|
||||
import Image from 'next/image';
|
||||
import Label from '../label';
|
||||
import LabelOverlay from '../labelOverlay';
|
||||
|
||||
export function GridTileImage({
|
||||
isInteractive = true,
|
||||
active,
|
||||
label,
|
||||
sparkles,
|
||||
available,
|
||||
...props
|
||||
}: {
|
||||
isInteractive?: boolean;
|
||||
@ -16,34 +18,54 @@ export function GridTileImage({
|
||||
currencyCode: string;
|
||||
position?: 'bottom' | 'center';
|
||||
};
|
||||
sparkles?: boolean;
|
||||
available?: boolean;
|
||||
} & React.ComponentProps<typeof Image>) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'group flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
|
||||
'group flex h-full w-full items-center justify-center overflow-visible rounded-lg dark:bg-black',
|
||||
{
|
||||
relative: label,
|
||||
'border-2 border-blue-600': active,
|
||||
'border-neutral-200 dark:border-neutral-800': !active
|
||||
'': active,
|
||||
'': !active
|
||||
}
|
||||
)}
|
||||
>
|
||||
{sparkles && (
|
||||
<Image
|
||||
className={clsx(
|
||||
'absolute z-0 h-full w-full opacity-0 transition duration-300 ease-in-out group-hover:opacity-100'
|
||||
)}
|
||||
src={'/okay_frame.svg'}
|
||||
width={420}
|
||||
height={420}
|
||||
alt={'branded frame'}
|
||||
/>
|
||||
)}
|
||||
{props.src ? (
|
||||
// eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
|
||||
<Image
|
||||
className={clsx('relative h-full w-full object-contain', {
|
||||
'transition duration-300 ease-in-out group-hover:scale-105': isInteractive
|
||||
})}
|
||||
className={clsx(
|
||||
'relative z-10 h-full w-full object-contain',
|
||||
{
|
||||
'transition duration-300 ease-in-out group-hover:opacity-40': isInteractive
|
||||
},
|
||||
{ '': !available }
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
) : null}
|
||||
{label ? (
|
||||
<Label
|
||||
title={label.title}
|
||||
amount={label.amount}
|
||||
currencyCode={label.currencyCode}
|
||||
position={label.position}
|
||||
/>
|
||||
<div className={clsx('opacity-0 transition group-hover:opacity-100')}>
|
||||
<LabelOverlay
|
||||
title={label.title}
|
||||
amount={label.amount}
|
||||
currencyCode={label.currencyCode}
|
||||
position={label.position}
|
||||
available={available}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,61 +3,57 @@ import clsx from 'clsx';
|
||||
export default function OkayLogotype(props: React.ComponentProps<'svg'>) {
|
||||
return (
|
||||
<svg
|
||||
id="Layer_1"
|
||||
data-name="Layer 1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label={`${process.env.SITE_NAME} logo`}
|
||||
id="Layer_2"
|
||||
data-name="Layer 2"
|
||||
viewBox="0 0 390 228.13"
|
||||
{...props}
|
||||
className={clsx('fill-black dark:fill-white', props.className)}
|
||||
className={clsx(props.className)}
|
||||
>
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<defs></defs>
|
||||
<g id="OkayXL_Logotype" data-name="OkayXL Logotype">
|
||||
<g>
|
||||
<g id="OkayXL_Logotype" data-name="OkayXL Logotype">
|
||||
<g>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m0,93.31C0,51.94,31.07,20.87,72.63,20.87s72.93,31.07,72.93,72.44-31.37,72.73-72.93,72.73S0,134.87,0,93.31Zm72.63,70.09c29.7.2,51.27-29.31,51.27-70.09S102.34,23.32,72.63,23.52c-29.41-.2-50.78,29.21-50.78,69.79s21.37,70.28,50.78,70.09Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m140,163.44c6.16-2.25,9-7.45,9-16.86V26.72c0-8.5-2.93-12.19-12-12.38v-1.12L167,0v146.58c0,9.41,2.84,14.61,9,16.86v.39h-36v-.39Zm48.78-72.97c16.92-15.92,18.97-24.02,6.22-27.25v-.39h33.55l-.1.2c-9.43,4.69-19.55,11.62-25.77,17.48l-19.26,18.26,50.57,63.87v.2h-22.47l-42.31-54,19.55-18.36Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m229.71,143.3c0-30.22,44.26-34.25,44.26-67.02,0-9.32-3.53-14.72-10.11-14.72-9.91,0-24.04,11.97-33.46,38.27h-.39v-27.99s20.38-12.06,34-12.06c17.15,0,28.33,8.92,28,29.9v57.25c-.16,5.39,1.61,7.06,3.76,7.06,2.55,0,5.49-2.45,7.16-8.15h.39c-.49,15.11-9.61,19.13-15.98,19.13-10.19,0-11.76-23.13-11.76-23.13h-1.02c-2.65,16.68-12.27,23.75-24.04,23.75s-20.8-8.05-20.8-22.28Zm30.47,15.48c5.1,0,11.17-4.41,13.82-20.88l.59-51.17c-5.2,20.58-26.07,25.09-26.07,52.34,0,15.29,6.57,19.7,11.67,19.7Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m339.11,164.4l-47.66-101.18.2-.39h35.35v.39c-9.49,3.53-9.78,13.43-1.16,32.15l22.57,48.62,17.15-36.86c12.59-27.05,11.14-40.58-4.55-43.91v-.39h29v.39l-66.88,140.61h-29.12v-.39c25.49-13.47,39.52-29.1,45.11-39.04Z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m71.4,120.24c-.95-1.78-1.48-2.43-1.65-3.17-.71-3.06-1.29-6.15-1.95-9.22-1.19-5.54-3.93-9.58-9.91-10.9-1.38-.31-2.53-1.71-3.78-2.61,1.05-1,1.93-2.52,3.17-2.91,8.86-2.79,9.76-10.2,10.71-17.71.41-3.28.96-6.54,1.63-9.78.16-.8,1.02-1.45,1.56-2.17.52.75,1.39,1.46,1.5,2.27.52,3.75.93,7.51,1.2,11.29.65,9.27,5,15.04,14.64,16.2,1.03.12,1.96,1.12,2.93,1.72-.85.77-1.62,2.07-2.57,2.22-10.73,1.67-14.35,9.04-15.47,18.66-.2,1.72-1.08,3.36-2.01,6.12Z"
|
||||
className="cls-1"
|
||||
d="m0,93.31C0,51.94,31.07,20.87,72.63,20.87s72.93,31.07,72.93,72.44-31.37,72.73-72.93,72.73S0,134.87,0,93.31Zm72.63,70.09c29.7.2,51.27-29.31,51.27-70.09S102.34,23.32,72.63,23.52c-29.41-.2-50.78,29.21-50.78,69.79s21.37,70.28,50.78,70.09Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m357.52,62.55c-.75.58-1.24,1.26-1.84,1.38-7.05,1.45-8.75,6.95-9.95,12.89-.13.64-.52,1.24-.79,1.85-.38-.6-.97-1.16-1.11-1.82-1.48-6.8-4.76-11.78-12.31-12.7-.45-.06-.84-.64-1.26-.99.39-.44.74-1.22,1.18-1.27,7.41-.9,11.58-4.95,12.4-12.43.04-.41.7-.74,1.07-1.11.24.41.66.81.69,1.23.52,6.74,3.52,11.2,10.73,11.94.36.04.67.55,1.19,1.02Z"
|
||||
className="cls-1"
|
||||
d="m140,163.44c6.16-2.25,9-7.45,9-16.86V26.72c0-8.5-2.93-12.19-12-12.38v-1.12L167,0v146.58c0,9.41,2.84,14.61,9,16.86v.39h-36v-.39Zm48.78-72.97c16.92-15.92,18.97-24.02,6.22-27.25v-.39h33.55l-.1.2c-9.43,4.69-19.55,11.62-25.77,17.48l-19.26,18.26,50.57,63.87v.2h-22.47l-42.31-54,19.55-18.36Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m274.57,179.53c.34,1.21.47,1.58.54,1.97.32,1.74.88,3.47.89,5.21.09,8.58,2.91,14.72,12.71,15.2.84.04,1.63.98,2.44,1.5-.37.42-.71,1.18-1.1,1.2-13.91.74-13.55,11.22-14.39,20.92-.08.89-.61,1.74-.94,2.6-.35-.9-.84-1.77-1.01-2.7-.34-1.9-.68-3.83-.69-5.75-.05-9.01-4.58-13.74-13.47-14.61-.88-.09-1.67-1.06-2.51-1.63.82-.47,1.63-1.35,2.45-1.35,13.68.02,12.59-10.76,14.35-19.47.15-.77.36-1.53.72-3.1Z"
|
||||
className="cls-1"
|
||||
d="m229.71,143.3c0-30.22,44.26-34.25,44.26-67.02,0-9.32-3.53-14.72-10.11-14.72-9.91,0-24.04,11.97-33.46,38.27h-.39v-27.99s20.38-12.06,34-12.06c17.15,0,28.33,8.92,28,29.9v57.25c-.16,5.39,1.61,7.06,3.76,7.06,2.55,0,5.49-2.45,7.16-8.15h.39c-.49,15.11-9.61,19.13-15.98,19.13-10.19,0-11.76-23.13-11.76-23.13h-1.02c-2.65,16.68-12.27,23.75-24.04,23.75s-20.8-8.05-20.8-22.28Zm30.47,15.48c5.1,0,11.17-4.41,13.82-20.88l.59-51.17c-5.2,20.58-26.07,25.09-26.07,52.34,0,15.29,6.57,19.7,11.67,19.7Z"
|
||||
/>
|
||||
<path
|
||||
strokeWidth="0px"
|
||||
d="m209.68,112.45c-.39-.58-.82-.99-.97-1.48-.94-3.03-2.74-5.21-5.77-6.39-.3-.12-.43-1.82-.19-1.96,3.43-1.88,5.47-4.77,6.59-8.43.1-.31.61-.78.78-.73.34.11.76.5.84.84.82,3.55,2.06,6.75,5.87,8.17.18.07.24,1.34.05,1.43-3.23,1.62-5.15,4.24-6.18,7.63-.09.31-.55.51-1.02.92Z"
|
||||
className="cls-1"
|
||||
d="m339.11,164.4l-47.66-101.18.2-.39h35.35v.39c-9.49,3.53-9.78,13.43-1.16,32.15l22.57,48.62,17.15-36.86c12.59-27.05,11.14-40.58-4.55-43.91v-.39h29v.39l-66.88,140.61h-29.12v-.39c25.49-13.47,39.52-29.1,45.11-39.04Z"
|
||||
/>
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="57.46" x2="70.74" y2="43.34" />
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="41.85" x2="70.74" y2="34.22" />
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="33.47" x2="70.74" y2="4.74" />
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="142.7" x2="70.74" y2="184.96" />
|
||||
<line strokeWidth="0.5px" x1="70.74" y1="124.6" x2="70.74" y2="140.04" />
|
||||
<line strokeWidth="0.5px" x1="95.97" y1="93.46" x2="172.15" y2="93.46" />
|
||||
<line strokeWidth="0.5px" x1="48.93" y1="93.46" x2="28.24" y2="93.46" />
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
className="cls-1"
|
||||
d="m71.4,120.24c-.95-1.78-1.48-2.43-1.65-3.17-.71-3.06-1.29-6.15-1.95-9.22-1.19-5.54-3.93-9.58-9.91-10.9-1.38-.31-2.53-1.71-3.78-2.61,1.05-1,1.93-2.52,3.17-2.91,8.86-2.79,9.76-10.2,10.71-17.71.41-3.28.96-6.54,1.63-9.78.16-.8,1.02-1.45,1.56-2.17.52.75,1.39,1.46,1.5,2.27.52,3.75.93,7.51,1.2,11.29.65,9.27,5,15.04,14.64,16.2,1.03.12,1.96,1.12,2.93,1.72-.85.77-1.62,2.07-2.57,2.22-10.73,1.67-14.35,9.04-15.47,18.66-.2,1.72-1.08,3.36-2.01,6.12Z"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
d="m357.52,62.55c-.75.58-1.24,1.26-1.84,1.38-7.05,1.45-8.75,6.95-9.95,12.89-.13.64-.52,1.24-.79,1.85-.38-.6-.97-1.16-1.11-1.82-1.48-6.8-4.76-11.78-12.31-12.7-.45-.06-.84-.64-1.26-.99.39-.44.74-1.22,1.18-1.27,7.41-.9,11.58-4.95,12.4-12.43.04-.41.7-.74,1.07-1.11.24.41.66.81.69,1.23.52,6.74,3.52,11.2,10.73,11.94.36.04.67.55,1.19,1.02Z"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
d="m274.57,179.53c.34,1.21.47,1.58.54,1.97.32,1.74.88,3.47.89,5.21.09,8.58,2.91,14.72,12.71,15.2.84.04,1.63.98,2.44,1.5-.37.42-.71,1.18-1.1,1.2-13.91.74-13.55,11.22-14.39,20.92-.08.89-.61,1.74-.94,2.6-.35-.9-.84-1.77-1.01-2.7-.34-1.9-.68-3.83-.69-5.75-.05-9.01-4.58-13.74-13.47-14.61-.88-.09-1.67-1.06-2.51-1.63.82-.47,1.63-1.35,2.45-1.35,13.68.02,12.59-10.76,14.35-19.47.15-.77.36-1.53.72-3.1Z"
|
||||
/>
|
||||
<path
|
||||
className="cls-1"
|
||||
d="m209.68,112.45c-.39-.58-.82-.99-.97-1.48-.94-3.03-2.74-5.21-5.77-6.39-.3-.12-.43-1.82-.19-1.96,3.43-1.88,5.47-4.77,6.59-8.43.1-.31.61-.78.78-.73.34.11.76.5.84.84.82,3.55,2.06,6.75,5.87,8.17.18.07.24,1.34.05,1.43-3.23,1.62-5.15,4.24-6.18,7.63-.09.31-.55.51-1.02.92Z"
|
||||
/>
|
||||
<line className="cls-2" x1="70.74" y1="57.46" x2="70.74" y2="43.34" />
|
||||
<line className="cls-2" x1="70.74" y1="41.85" x2="70.74" y2="34.22" />
|
||||
<line className="cls-2" x1="70.74" y1="33.47" x2="70.74" y2="4.74" />
|
||||
<line className="cls-2" x1="70.74" y1="142.7" x2="70.74" y2="184.96" />
|
||||
<line className="cls-2" x1="70.74" y1="124.6" x2="70.74" y2="140.04" />
|
||||
<line className="cls-2" x1="95.97" y1="93.46" x2="172.15" y2="93.46" />
|
||||
<line className="cls-2" x1="48.93" y1="93.46" x2="28.24" y2="93.46" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,10 +18,12 @@ const Label = ({
|
||||
'lg:px-20 lg:pb-[35%]': position === 'center'
|
||||
})}
|
||||
>
|
||||
<div className="flex items-center rounded-full border bg-white/70 p-1 text-xs font-semibold text-black backdrop-blur-md dark:border-neutral-800 dark:bg-black/70 dark:text-white">
|
||||
<h3 className="mr-4 line-clamp-2 flex-grow pl-2 leading-none tracking-tight">{title}</h3>
|
||||
<div className="flex items-center border bg-white/70 p-1 text-xs font-semibold text-black backdrop-blur-sm dark:border-neutral-800 dark:bg-black/70 dark:text-white">
|
||||
<h3 className="mr-4 line-clamp-2 flex-grow pl-2 text-lg leading-none tracking-tight">
|
||||
{title}
|
||||
</h3>
|
||||
<Price
|
||||
className="flex-none rounded-full bg-blue-600 p-2 text-white"
|
||||
className="flex-none bg-black p-2 text-white"
|
||||
amount={amount}
|
||||
currencyCode={currencyCode}
|
||||
currencyCodeClassName="hidden @[275px]/label:inline"
|
||||
|
||||
40
components/labelOverlay.tsx
Normal file
40
components/labelOverlay.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import clsx from 'clsx';
|
||||
import Price from './price';
|
||||
|
||||
const LabelOverlay = ({
|
||||
title,
|
||||
amount,
|
||||
currencyCode,
|
||||
position = 'bottom',
|
||||
available
|
||||
}: {
|
||||
title: string;
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
position?: 'bottom' | 'center';
|
||||
available?: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'absolute bottom-20 left-0 z-20 flex w-full flex-col items-center justify-center @container/label'
|
||||
)}
|
||||
>
|
||||
<h3 className="mb-2 line-clamp-2 text-center text-5xl tracking-tight">{title}</h3>
|
||||
{available ? (
|
||||
<Price
|
||||
className="flex-none bg-black p-2 text-xl tracking-wide text-white"
|
||||
amount={amount}
|
||||
currencyCode={currencyCode}
|
||||
currencyCodeClassName="hidden @[275px]/label:inline"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<span className="bg-black p-2 text-lg text-white">Sold Out</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LabelOverlay;
|
||||
@ -6,7 +6,6 @@ import { Menu } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
import { Suspense } from 'react';
|
||||
import MobileMenu from './mobile-menu';
|
||||
import Search from './search';
|
||||
const { SITE_NAME } = process.env;
|
||||
|
||||
export default async function Navbar() {
|
||||
@ -40,9 +39,7 @@ export default async function Navbar() {
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="hidden justify-center md:flex md:w-1/3">
|
||||
<Search />
|
||||
</div>
|
||||
<div className="hidden justify-center md:flex md:w-1/3">{/* <Search /> */}</div>
|
||||
<div className="flex justify-end md:w-1/3">
|
||||
<Suspense fallback={<OpenCart />}>
|
||||
<Cart />
|
||||
|
||||
@ -41,7 +41,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
|
||||
)}
|
||||
|
||||
{images.length > 1 ? (
|
||||
<div className="absolute bottom-[15%] flex w-full justify-center">
|
||||
<div className="absolute bottom-[15%] hidden w-full justify-center">
|
||||
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
|
||||
<Link
|
||||
aria-label="Previous product image"
|
||||
@ -87,6 +87,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
|
||||
width={80}
|
||||
height={80}
|
||||
active={isActive}
|
||||
sparkles={false}
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@ -9,7 +9,7 @@ export function ProductDescription({ product }: { product: Product }) {
|
||||
<>
|
||||
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
|
||||
<h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
|
||||
<div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
|
||||
<div className="mr-auto w-auto bg-black p-2 text-lg text-white">
|
||||
<Price
|
||||
amount={product.priceRange.maxVariantPrice.amount}
|
||||
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
|
||||
@ -20,7 +20,7 @@ export function ProductDescription({ product }: { product: Product }) {
|
||||
|
||||
{product.descriptionHtml ? (
|
||||
<Prose
|
||||
className="mb-6 text-sm leading-tight dark:text-white/[60%]"
|
||||
className="mb-6 font-sans text-sm leading-tight dark:text-white/[60%]"
|
||||
html={product.descriptionHtml}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
@ -84,12 +84,12 @@ export function VariantSelector({
|
||||
onClick={() => {
|
||||
router.replace(optionUrl, { scroll: false });
|
||||
}}
|
||||
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
|
||||
title={`${option.name} ${value}${!isAvailableForSale ? ' (Sold Out)' : ''}`}
|
||||
className={clsx(
|
||||
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
|
||||
{
|
||||
'cursor-default ring-2 ring-blue-600': isActive,
|
||||
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
|
||||
'cursor-default ring-2 ring-black': isActive,
|
||||
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-black ':
|
||||
!isActive && isAvailableForSale,
|
||||
'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
|
||||
!isAvailableForSale
|
||||
|
||||
BIN
fonts/OTJubilee-Platinum.woff
Normal file
BIN
fonts/OTJubilee-Platinum.woff
Normal file
Binary file not shown.
BIN
public/no.png
Normal file
BIN
public/no.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 835 KiB |
26
public/okay_frame.svg
Normal file
26
public/okay_frame.svg
Normal file
@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 461 461">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.cls-1, .cls-2 {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="bg">
|
||||
<g>
|
||||
<path class="cls-2" d="m106.79,265.15c-.37.33-.64.71-.99.86-3.67,1.52-4.89,4.71-5.72,8.2-.11.46-.54.85-.82,1.28-.42-.37-1.11-.67-1.23-1.11-.96-3.72-2.62-6.84-6.38-8.46-.17-.07-.15-1.39.11-1.53,4.19-2.28,5.58-6.21,6.44-10.51.1-.49.48-.92.73-1.38.24.43.64.85.69,1.31.49,4.53,1.96,8.42,6.45,10.48.27.12.42.49.72.87Z"/>
|
||||
<path class="cls-2" d="m372.08,199.46c.3,2.3.62,4.59.91,6.89.41,3.29,3.14,3.47,5.51,4.18.74.22,1.41.66,2.12.99-.6.27-1.19.56-1.8.8-5.19,2.01-6.07,3.35-6.23,8.88-.04,1.34-.57,2.68-.96,3.99-.06.2-.67.36-.97.3-.16-.03-.31-.57-.33-.88-.12-2.58,0-5.2-.37-7.75-.49-3.38-2.96-4.59-6.12-4.76-.26-.01-.5-.37-.75-.57.25-.2.47-.52.75-.58,6.69-1.49,6.83-4.26,7.11-9.76.04-.71.08-1.44.27-2.12.08-.29.55-.47.85-.69.2.32.4.63.6.95-.19.05-.38.1-.58.14Z"/>
|
||||
<path class="cls-2" d="m73.81,427.43c-.73-1.38-1.15-1.88-1.28-2.45-.55-2.37-1-4.77-1.51-7.15-.92-4.29-3.05-7.42-7.68-8.45-1.07-.24-1.96-1.33-2.93-2.03.81-.77,1.5-1.95,2.46-2.26,6.87-2.16,7.57-7.91,8.3-13.72.32-2.54.74-5.07,1.26-7.57.13-.62.79-1.13,1.21-1.68.4.58,1.08,1.13,1.17,1.76.4,2.9.72,5.82.93,8.74.5,7.18,3.87,11.66,11.34,12.55.8.1,1.52.87,2.27,1.33-.66.59-1.25,1.61-1.99,1.72-8.31,1.3-11.12,7.01-11.99,14.46-.15,1.33-.83,2.6-1.55,4.74Z"/>
|
||||
<path class="cls-2" d="m358.79,405.16c-.24-.35-.5-.6-.59-.9-.57-1.84-1.67-3.16-3.5-3.88-.18-.07-.26-1.11-.12-1.19,2.08-1.14,3.32-2.9,4.01-5.12.06-.19.37-.48.48-.44.21.07.46.3.51.51.5,2.16,1.25,4.1,3.57,4.96.11.04.14.81.03.87-1.96.99-3.13,2.58-3.76,4.64-.06.19-.33.31-.62.56Z"/>
|
||||
<path class="cls-2" d="m372.35,16.25c.25.9.35,1.18.4,1.46.24,1.29.65,2.58.66,3.87.06,6.37,2.16,10.93,9.44,11.29.62.03,1.21.73,1.81,1.11-.27.31-.53.87-.82.89-10.33.55-10.06,8.33-10.68,15.53-.06.66-.46,1.29-.69,1.93-.26-.67-.63-1.31-.75-2-.25-1.41-.51-2.85-.51-4.27-.04-6.69-3.4-10.21-10-10.85-.65-.06-1.24-.79-1.86-1.21.61-.35,1.21-1,1.82-1,10.16.01,9.35-7.99,10.65-14.46.11-.57.26-1.13.54-2.3Z"/>
|
||||
<path class="cls-2" d="m55.3,100.13c-.66.51-1.09,1.11-1.62,1.21-6.2,1.27-7.7,6.12-8.76,11.34-.12.57-.46,1.09-.7,1.63-.33-.53-.85-1.03-.97-1.6-1.3-5.98-4.19-10.37-10.83-11.17-.4-.05-.74-.57-1.11-.87.35-.39.65-1.07,1.04-1.12,6.52-.79,10.19-4.36,10.91-10.94.04-.36.62-.65.94-.98.21.36.58.71.61,1.08.46,5.93,3.1,9.86,9.44,10.51.32.03.59.49,1.05.9Z"/>
|
||||
<path class="cls-2" d="m417.67,93.5c-1.36-1.83-2.87-3.85-4.37-5.87.18-.51.3-1.2.54-1.51,1.19-1.56,2.4-3.06,3.64-4.46.27-.31.76-.41,1-.1,1.29,1.64,2.54,3.41,3.79,5.22.16.23.27,1.31.23,1.35-1.56,1.8-3.15,3.53-4.82,5.36Z"/>
|
||||
<rect class="cls-1" width="461" height="461"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@ -6,7 +6,8 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['var(--font-geist-sans)']
|
||||
sans: ['var(--font-geist-sans)'],
|
||||
jubilee: ['var(--font-geist-sans)'],
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user