diff --git a/app/OTJubilee-Platinum.ttf b/app/OTJubilee-Platinum.ttf new file mode 100644 index 000000000..2f86d995a Binary files /dev/null and b/app/OTJubilee-Platinum.ttf differ diff --git a/app/[page]/page.tsx b/app/[page]/page.tsx index 3dfde9f92..e00a6521a 100644 --- a/app/[page]/page.tsx +++ b/app/[page]/page.tsx @@ -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 ( + <> +
+
+
+ +
+
+
+ + ); return ( <> diff --git a/app/error.tsx b/app/error.tsx index e0a7416a3..1d8550784 100644 --- a/app/error.tsx +++ b/app/error.tsx @@ -9,7 +9,7 @@ export default function Error({ reset }: { reset: () => void }) { action again.

); } @@ -38,7 +38,7 @@ function SubmitButton({
- Add To Cart + Select a size above ); } diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx index aee2f7a47..ecffa4d7d 100644 --- a/components/cart/modal.tsx +++ b/components/cart/modal.tsx @@ -176,7 +176,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) { Proceed to Checkout diff --git a/components/cart/open-cart.tsx b/components/cart/open-cart.tsx index fa8226ab5..79593be23 100644 --- a/components/cart/open-cart.tsx +++ b/components/cart/open-cart.tsx @@ -15,7 +15,7 @@ export default function OpenCart({ /> {quantity ? ( -
+
{quantity}
) : null} diff --git a/components/grid/homepageShirts.tsx b/components/grid/homepageShirts.tsx new file mode 100644 index 000000000..4bad8cf0b --- /dev/null +++ b/components/grid/homepageShirts.tsx @@ -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 ( +
+ + +
+ {item.title && ( +

{item.title}

+ )} +
+ +
+ ); +} + +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 ( + <> +
+
+

+ Presenting the latest season of extra-large garments from Okay XL... +

+

+ “ Fake Anime Shows Your Friends Have Never Heard Of ” +

+
+
+
+ {homepageItems.map((product) => ( + + ))} +
+
+

+ Okay XL only offers t-shirt sizes XL and up.... +

+

+ I made the decision to exclusively stock sizes XL & up because, I can. +

+

+ 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{' '} + + you can find more information here. + +

+
+ + ); +} diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx index f79a459f4..71e89245f 100644 --- a/components/grid/tile.tsx +++ b/components/grid/tile.tsx @@ -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) { return (
+ {sparkles && ( + {'branded + )} {props.src ? ( // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript ) : null} {label ? ( -
); diff --git a/components/icons/okayLogotype.tsx b/components/icons/okayLogotype.tsx index 4595520d6..57dccbaa5 100644 --- a/components/icons/okayLogotype.tsx +++ b/components/icons/okayLogotype.tsx @@ -3,61 +3,57 @@ import clsx from 'clsx'; export default function OkayLogotype(props: React.ComponentProps<'svg'>) { return ( - + + - - - - - - - - - - - - - - - + + + + + + + + + + + ); } diff --git a/components/label.tsx b/components/label.tsx index 113afacb0..edfb3c616 100644 --- a/components/label.tsx +++ b/components/label.tsx @@ -18,10 +18,12 @@ const Label = ({ 'lg:px-20 lg:pb-[35%]': position === 'center' })} > -
-

{title}

+
+

+ {title} +

{ + return ( +
+

{title}

+ {available ? ( + + ) : ( + <> + Sold Out + + )} +
+ ); +}; + +export default LabelOverlay; diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx index 8cb5f7182..d1d7fdcac 100644 --- a/components/layout/navbar/index.tsx +++ b/components/layout/navbar/index.tsx @@ -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() { ) : null}
-
- -
+
{/* */}
}> diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx index 0b03557a5..274f2243a 100644 --- a/components/product/gallery.tsx +++ b/components/product/gallery.tsx @@ -41,7 +41,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[] )} {images.length > 1 ? ( -
+
diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx index a81a6b02c..9057ba6d9 100644 --- a/components/product/product-description.tsx +++ b/components/product/product-description.tsx @@ -9,7 +9,7 @@ export function ProductDescription({ product }: { product: Product }) { <>

{product.title}

-
+
) : null} diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx index 9d47eb5c8..1c8d7ea84 100644 --- a/components/product/variant-selector.tsx +++ b/components/product/variant-selector.tsx @@ -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 diff --git a/fonts/OTJubilee-Platinum.woff b/fonts/OTJubilee-Platinum.woff new file mode 100644 index 000000000..f7d8fd1a0 Binary files /dev/null and b/fonts/OTJubilee-Platinum.woff differ diff --git a/public/no.png b/public/no.png new file mode 100644 index 000000000..b7f1b41b6 Binary files /dev/null and b/public/no.png differ diff --git a/public/okay_frame.svg b/public/okay_frame.svg new file mode 100644 index 000000000..c28a5f92d --- /dev/null +++ b/public/okay_frame.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index eaf8db155..128baa502 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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: {