refactor(index): add Italian flag icon separately

Instead of installing the entire flags icon pack (which for some reason
isn't being tree shaken properly and is causing my Vercel functions to
be around 1.91 MB in size), this patch updates the index page to simply
add that single icon as a React component.

Fixes: e1dae96 ("feat(index): replace timeline with "dolce" definition")

app/routes/_index/header.tsx

@@ -0,0 +1,36 @@
+import { Link } from '@remix-run/react'
+import { ChevronRight, Plus } from 'lucide-react'
+import { Fragment } from 'react'
+
+import { HeaderWrapper, HeaderActions } from 'components/header'
+
+const links = [
+  { to: '/shows', label: 'Shows' },
+  { to: '/products', label: 'Products' },
+  { to: '/brands', label: 'Brands' },
+  { to: '/designers', label: 'Designers' },
+]
+
+export function Header() {
+  return (
+    <HeaderWrapper>
+      <ol className='flex items-center gap-2 text-lg tracking-tighter lowercase'>
+        <h1>dolce</h1>
+        <ChevronRight className='text-gray-300 dark:text-gray-600 h-4 w-4 mt-0.5' />
+        {links.map((link, index) => (
+          <Fragment key={link.to}>
+            {index !== 0 && (
+              <Plus className='text-gray-300 dark:text-gray-600 h-4 w-4 mt-0.5' />
+            )}
+            <li className='text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors'>
+              <Link prefetch='intent' to={link.to}>
+                {link.label}
+              </Link>
+            </li>
+          </Fragment>
+        ))}
+      </ol>
+      <HeaderActions />
+    </HeaderWrapper>
+  )
+}

app/routes/_index/hero.tsx

@@ -0,0 +1,40 @@
+import { type PropsWithChildren } from 'react'
+
+import { Italy } from './italy'
+
+export function Hero() {
+  return (
+    <main className='flex flex-col sm:flex-row sm:items-center justify-center mt-6 p-6 gap-6'>
+      <div className='aspect-square w-full sm:w-72 sm:h-72 bg-gray-100 dark:bg-gray-900'>
+        <img src='/brands.jpg' className='object-cover h-full w-full' alt='' />
+      </div>
+      <article>
+        <h1 className='text-2xl font-medium mb-4 tracking-tighter flex items-center gap-0.5'>
+          <span>dol</span>
+          <span>·</span>
+          <span>ce</span>
+        </h1>
+        <dl>
+          <Definition label='adverb'>
+            (especially as a direction) sweetly and softly.
+          </Definition>
+          <Definition label='adjective'>
+            performed in a sweet and soft manner.
+          </Definition>
+          <Definition label='origin'>
+            <Italy className='border border-gray-900 dark:border-white rounded-full mt-1' />
+          </Definition>
+        </dl>
+      </article>
+    </main>
+  )
+}
+
+function Definition({ label, children }: PropsWithChildren<{ label: string }>) {
+  return (
+    <>
+      <dt className='italic text-gray-400 dark:text-gray-600'>{label}</dt>
+      <dd className='mb-4'>{children}</dd>
+    </>
+  )
+}

app/routes/_index/italy.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+export const Italy = React.forwardRef<
+  SVGSVGElement,
+  React.SVGProps<SVGSVGElement>
+>((props, ref) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 512 512'
+    height='1em'
+    width='1em'
+    ref={ref}
+    {...props}
+  >
+    <g fillRule='evenodd' strokeWidth='1pt'>
+      <path fill='#fff' d='M0 0h512v512H0z' />
+      <path fill='#009246' d='M0 0h170.7v512H0z' />
+      <path fill='#ce2b37' d='M341.3 0H512v512H341.3z' />
+    </g>
+  </svg>
+))

app/routes/_index/route.tsx

@@ -0,0 +1,11 @@
+import { Header } from './header'
+import { Hero } from './hero'
+
+export default function IndexPage() {
+  return (
+    <>
+      <Header />
+      <Hero />
+    </>
+  )
+}

package.json

@@ -47,7 +47,6 @@
   "dependencies": {
     "@conform-to/react": "^0.7.4",
     "@conform-to/zod": "^0.7.4",
-    "@icongo/fg": "^1.2.0",
     "@prisma/client": "^4.16.2",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",