quick branding

components/cart/open-cart.tsx

@@ -9,7 +9,7 @@ export default function OpenCart({
   quantity?: number;
 }) {
   return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-white transition-colors dark:border-neutral-700 dark:text-white">
       <ShoppingCartIcon
         className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
       />

components/icons/logo.tsx

@@ -1,16 +1,6 @@
-import clsx from 'clsx';
 
-export default function LogoIcon(props: React.ComponentProps<'svg'>) {
+export default function LogoIcon(props: React.ComponentProps<'img'>) {
   return (
-    <svg
+    <img src="/logo-square-black.png" alt="scape squared logo" />
-      xmlns="http://www.w3.org/2000/svg"
-      aria-label={`${process.env.SITE_NAME} logo`}
-      viewBox="0 0 32 28"
-      {...props}
-      className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
-    >
-      <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
-      <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />
-    </svg>
   );
 }

components/layout/footer.tsx

@@ -56,11 +56,11 @@ export default async function Footer() {
             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
           </p>
           <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
-          <p>Designed in California</p>
+          <p>Designed in England</p>
           <p className="md:ml-auto">
             Crafted by{' '}
-            <a href="https://vercel.com" className="text-black dark:text-white">
+            <a href="https://www.instagram.com/sammiisparkle" className="text-black dark:text-white" target="_blank">
-              ▲ Vercel
+              Sammii Sparkle
             </a>
           </p>
         </div>

components/layout/navbar/index.tsx

@@ -1,6 +1,6 @@
 import Cart from 'components/cart';
 import OpenCart from 'components/cart/open-cart';
-import LogoSquare from 'components/logo-square';
+import LogoType from 'components/logo-type';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
@@ -13,7 +13,7 @@ export default async function Navbar() {
   const menu = await getMenu('next-js-frontend-header-menu');
 
   return (
-    <nav className="relative flex items-center justify-between p-4 lg:px-6">
+    <nav className="relative flex items-center justify-between p-4 lg:px-6 bg-black">
       <div className="block flex-none md:hidden">
         <MobileMenu menu={menu} />
       </div>
@@ -24,10 +24,11 @@ export default async function Navbar() {
             aria-label="Go back home"
             className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
           >
-            <LogoSquare />
+            {/* <LogoSquare /> */}
-            <div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
+            {/* <div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
               {SITE_NAME}
-            </div>
+            </div> */}
+            <LogoType />
           </Link>
           {menu.length ? (
             <ul className="hidden text-sm md:flex md:items-center">

components/logo-type.tsx

@@ -0,0 +1,29 @@
+// import clsx from 'clsx';
+
+// export default function LogoType({ size }: { size?: 'sm' | undefined }) {
+//   return (
+//     <div
+//       className={clsx(
+//         'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
+//         {
+//           'h-[40px] w-[40px] rounded-xl': !size,
+//           'h-[30px] w-[30px] rounded-lg': size === 'sm'
+//         }
+//       )}
+//     >
+//       {/* <LogoIcon
+//         className={clsx({
+//           'h-[16px] w-[16px]': !size,
+//           'h-[10px] w-[10px]': size === 'sm'
+//         })}
+//       /> */}
+//       <img src="/logo-white" alt="scape squared typographic logo" />
+//     </div>
+//   );
+// }
+
+export default function LogoType(props: React.ComponentProps<'img'>) {
+  return (
+    <img src="/logo-white.png" alt="scape squared logo" className="w-24"/>
+  );
+}