From 830eb1da254ce3782964ab7a00676cefb4c81a81 Mon Sep 17 00:00:00 2001
From: Jeroen Branje <info@jeroenbranje.nl>
Date: Wed, 6 Mar 2024 15:28:43 +0100
Subject: [PATCH] feat(envited.ascs.digital): Add Assets dummy pages

Signed-off-by: Jeroen Branje <info@jeroenbranje.nl>
---
 .../src/components/Atoms/Button/Button.tsx    |  10 +-
 apps/design-system/src/index.ts               |   2 +-
 .../app/assets/detail/page.tsx                |  13 +
 apps/envited.ascs.digital/app/assets/page.tsx |  13 +
 .../modules/Asset/Asset.tsx                   | 411 ++++++++++++++++++
 .../modules/Asset/index.ts                    |   1 +
 .../modules/Assets/Assets.tsx                 | 283 ++++++++++++
 .../modules/Assets/index.ts                   |   1 +
 .../modules/Footer/Footer.tsx                 |   4 +-
 .../modules/Header/Header.tsx                 |  22 +-
 10 files changed, 749 insertions(+), 11 deletions(-)
 create mode 100644 apps/envited.ascs.digital/app/assets/detail/page.tsx
 create mode 100644 apps/envited.ascs.digital/app/assets/page.tsx
 create mode 100644 apps/envited.ascs.digital/modules/Asset/Asset.tsx
 create mode 100644 apps/envited.ascs.digital/modules/Asset/index.ts
 create mode 100644 apps/envited.ascs.digital/modules/Assets/Assets.tsx
 create mode 100644 apps/envited.ascs.digital/modules/Assets/index.ts

diff --git a/apps/design-system/src/components/Atoms/Button/Button.tsx b/apps/design-system/src/components/Atoms/Button/Button.tsx
index 8b88304b..b76f18f2 100644
--- a/apps/design-system/src/components/Atoms/Button/Button.tsx
+++ b/apps/design-system/src/components/Atoms/Button/Button.tsx
@@ -37,9 +37,9 @@ const Button: FC<Props> = ({
   }
 
   const sizeClassMap = {
-    [Size.small]: 'py-3 px-4 md:py-4 md:px-6 text-xs sm:text-sm',
-    [Size.medium]: 'py-4 px-8 text-sm sm:text-base',
-    [Size.large]: 'py-4 px-10 text-base sm:text-2xl',
+    [Size.small]: 'py-2 px-4 text-xs sm:text-sm',
+    [Size.medium]: 'px-8 py-3 text-sm sm:text-base',
+    [Size.large]: 'px-8 py-3 text-base sm:text-2xl',
   }
 
   const indicatorColour = {
@@ -53,13 +53,15 @@ const Button: FC<Props> = ({
     },
   }
 
+  // 'flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50'
+
   const buttonView = isWorking ? <LoadingIndicator size={size} colour={indicatorColour[type][style]} /> : children
 
   return (
     <button
       type="button"
       onClick={() => onClick()}
-      className={`${styleClassMap[type][style]} ${sizeClassMap[size]} ${extraClasses} disabled:opacity-50 font-bold leading-none transition duration-300 ease-in-out rounded-full`}
+      className={`${styleClassMap[type][style]} ${sizeClassMap[size]} ${extraClasses} disabled:opacity-50 font-bold leading-none transition duration-300 ease-in-out rounded-md`}
       disabled={isDisabled || isWorking}
     >
       {buttonView}
diff --git a/apps/design-system/src/index.ts b/apps/design-system/src/index.ts
index ff1c24c6..17314484 100644
--- a/apps/design-system/src/index.ts
+++ b/apps/design-system/src/index.ts
@@ -15,7 +15,7 @@ export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow } from
 export { ThemeToggle } from './components/Atoms/ThemeToggle'
 export { Tooltip } from './components/Atoms/Tooltip'
 
-export { ColorScheme, Language } from './types'
+export { ColorScheme, Language, Size } from './types'
 
 export { useClipboard, useLocalStorage } from './hooks'
 export { formatPercentage, formatDate, formatShortDate, calculateProfitPercentage } from './common/utils'
diff --git a/apps/envited.ascs.digital/app/assets/detail/page.tsx b/apps/envited.ascs.digital/app/assets/detail/page.tsx
new file mode 100644
index 00000000..47460455
--- /dev/null
+++ b/apps/envited.ascs.digital/app/assets/detail/page.tsx
@@ -0,0 +1,13 @@
+import { Asset } from '../../../modules/Asset'
+
+export default async function Index() {
+  return (
+    <>
+      <main className="mx-auto max-w-2xl px-4 pt-0 pb-12 sm:px-6 lg:max-w-7xl lg:px-8">
+        <Asset />
+      </main>
+    </>
+  )
+}
+
+export const dynamic = 'force-dynamic'
diff --git a/apps/envited.ascs.digital/app/assets/page.tsx b/apps/envited.ascs.digital/app/assets/page.tsx
new file mode 100644
index 00000000..52c28a7b
--- /dev/null
+++ b/apps/envited.ascs.digital/app/assets/page.tsx
@@ -0,0 +1,13 @@
+import { Assets } from '../../modules/Assets'
+
+export default async function Index() {
+  return (
+    <>
+      <main className="mx-auto max-w-2xl px-4 pt-0 pb-12 sm:px-6 lg:max-w-7xl lg:px-8">
+        <Assets />
+      </main>
+    </>
+  )
+}
+
+export const dynamic = 'force-dynamic'
diff --git a/apps/envited.ascs.digital/modules/Asset/Asset.tsx b/apps/envited.ascs.digital/modules/Asset/Asset.tsx
new file mode 100644
index 00000000..f6b07180
--- /dev/null
+++ b/apps/envited.ascs.digital/modules/Asset/Asset.tsx
@@ -0,0 +1,411 @@
+'use client'
+
+import { Button } from '@envited-marketplace/design-system'
+import { Tab } from '@headlessui/react'
+import { HomeIcon } from '@heroicons/react/20/solid'
+import { Fragment } from 'react'
+
+const product = {
+  name: 'Motorway Testfield A8 Heimsheim <-> Leonberg (XODR)',
+  version: { name: '1.0', date: 'June 5, 2021', datetime: '2021-06-05' },
+  sku: 'XODR-3DM-23001',
+  price: '20 xtz',
+  shortDescription:
+    'A map section of the A8 highway from Heimsheim to Leonberg with a total length of 37.91 km. It was checked, validated and labeled with regard to the credibility levels defined in the UPSIM project. The road quality (asphalt) is good.',
+  description:
+    'The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.',
+  highlights: ['OpenDRIVE', '15,15 MB', 'December 5, 2023'],
+  type: 'OpenDRIVE',
+  technologyPartner: '3D Mapping Solutions GmbH',
+  fileSize: '15,18 MB',
+  publishDate: 'Dec. 5, 2023',
+  relatedTools: 'OddLOT (Tool) , COVISE (Tool)',
+  fileFormat: 'OpenDRIVE',
+  city: 'Munich',
+  country: 'Germany',
+  length: '>10km',
+  roadSurface: 'Asphalt',
+  streetName: 'Bundesautobahn A8',
+  streetType: 'Highway/ Autobahn',
+  trackType: 'Map',
+  trafficManagement: 'Four lanes, Highway/ Autobahn Entry, Highway/ Autobahn Exit, Three lanes, Two lanes',
+  miscellaneous: '-',
+  sourceData: '-',
+  directionOfTravel: 'both ways',
+  crossSlope: 'No',
+  environment: 'Not existing',
+  resolution: '-',
+  superelevation: 'Yes',
+  imageSrc: 'https://envited.market/media/OpenDRIVE_A9_final_bO9LFP7.png',
+  imageAlt: 'Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles.',
+}
+
+const reviews = {
+  featured: [
+    {
+      id: 1,
+      content: `
+        <p>This icon pack is just what I need for my latest project. There's an icon for just about anything I could ever need. Love the playful look!</p>
+      `,
+      date: 'July 16, 2021',
+      datetime: '2021-07-16',
+      author: 'Emily Selman',
+      avatarSrc:
+        'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80',
+    },
+    {
+      id: 2,
+      content: `
+        <p>Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.</p>
+      `,
+      date: 'July 12, 2021',
+      datetime: '2021-07-12',
+      author: 'Hector Gibbons',
+      avatarSrc:
+        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80',
+    },
+  ],
+}
+
+const license = {
+  href: '#',
+  summary:
+    'For personal and professional use. You cannot resell or redistribute these icons in their original or modified state.',
+}
+
+const products = [
+  {
+    id: 1,
+    name: 'Motorway Testfield A8 Heimsheim <-> Leonberg (XODR)',
+    href: '/assets/detail',
+    description: 'A map section of the A8 highway from Heimsheim to Leonberg with a total length of 37.91 km. It was',
+    options: 'XODR-3DM-23001',
+    price: '20 xtz',
+    imageSrc: 'https://envited.market/media/OpenDRIVE_A9_final_bO9LFP7.png.500x320_q85_crop-scale.png',
+    imageAlt: 'Eight shirts arranged on table in black, olive, grey, blue, white, red, mustard, and green.',
+  },
+  {
+    id: 2,
+    name: 'San Francisco Sample (Unreal-Carla)',
+    href: '/assets/detail',
+    description:
+      'San Francisco Union Square and adjacent streets. 3D Visualization of San Francisco HD maps, designed based on real-world OpenDRIVE data',
+    options: 'CARLA-TGG-21001',
+    price: '300 xtz',
+    imageSrc: 'https://envited.market/media/Kachel_San_Francisco_unreal.png.500x320_q85_crop-scale.png',
+    imageAlt: 'Front of plain black t-shirt.',
+  },
+]
+
+const pages = [
+  { name: 'Assets', href: '#', current: false },
+  { name: 'XODR-3DM-23001', href: '#', current: true },
+]
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export const Asset = () => {
+  return (
+    <>
+      <div className="pb-8">
+        <nav className="flex" aria-label="Breadcrumb">
+          <ol role="list" className="flex items-center space-x-4">
+            <li>
+              <div>
+                <a href="#" className="text-gray-400 hover:text-gray-500">
+                  <HomeIcon className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
+                  <span className="sr-only">Home</span>
+                </a>
+              </div>
+            </li>
+            {pages.map(page => (
+              <li key={page.name}>
+                <div className="flex items-center">
+                  <svg
+                    className="h-5 w-5 flex-shrink-0 text-gray-300"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    aria-hidden="true"
+                  >
+                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+                  </svg>
+                  <a
+                    href={page.href}
+                    className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                    aria-current={page.current ? 'page' : undefined}
+                  >
+                    {page.name}
+                  </a>
+                </div>
+              </li>
+            ))}
+          </ol>
+        </nav>
+      </div>
+      <div>
+        {/* Product */}
+        <div className="lg:grid lg:grid-cols-7 lg:grid-rows-1 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16">
+          {/* Product image */}
+          <div className="lg:col-span-4 lg:row-end-1">
+            <div className="aspect-h-3 aspect-w-4 overflow-hidden rounded-lg bg-gray-100">
+              <img src={product.imageSrc} alt={product.imageAlt} className="object-cover object-center" />
+            </div>
+          </div>
+
+          {/* Product details */}
+          <div className="mx-auto mt-14 max-w-2xl sm:mt-16 lg:col-span-3 lg:row-span-2 lg:row-end-2 lg:mt-0 lg:max-w-none">
+            <div className="flex flex-col-reverse">
+              <div className="mt-4">
+                <h1 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">{product.name}</h1>
+
+                <h2 id="information-heading" className="sr-only">
+                  Product information
+                </h2>
+                <p className="mt-2 text-sm text-gray-500">
+                  Version {product.version.name} (Updated{' '}
+                  <time dateTime={product.version.datetime}>{product.version.date}</time>)
+                </p>
+              </div>
+
+              <div>
+                <h3 className="sr-only">Reviews</h3>
+                <div className="flex items-center">
+                  <p className="mt-2 text-sm text-gray-500">{product.sku}</p>
+                </div>
+              </div>
+            </div>
+
+            <p className="mt-6 text-gray-500">{product.shortDescription}</p>
+
+            <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
+              <Button onClick={() => {}}>Buy {product.price}</Button>
+              <button
+                type="button"
+                className="flex w-full items-center justify-center rounded-md border border-transparent bg-blue-900/10 px-8 py-3 text-base font-medium text-blue-900 hover:bg-blue-900/20 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50"
+              >
+                Preview
+              </button>
+            </div>
+
+            <div className="mt-10 border-t border-gray-200 pt-10">
+              <h3 className="text-sm font-medium text-gray-900">File information</h3>
+              <div className="prose prose-sm mt-4 text-gray-500">
+                <ul role="list">
+                  {product.highlights.map(highlight => (
+                    <li key={highlight}>{highlight}</li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+
+            <div className="mt-10 border-t border-gray-200 pt-10">
+              <h3 className="text-sm font-medium text-gray-900">License</h3>
+              <p className="mt-4 text-sm text-gray-500">
+                {license.summary}{' '}
+                <a href={license.href} className="font-medium text-blue-900 hover:text-blue-800">
+                  Read full license
+                </a>
+              </p>
+            </div>
+          </div>
+
+          <div className="mx-auto mt-16 w-full max-w-2xl lg:col-span-4 lg:mt-0 lg:max-w-none">
+            <Tab.Group as="div">
+              <div className="border-b border-gray-200">
+                <Tab.List className="-mb-px flex space-x-8">
+                  <Tab
+                    className={({ selected }) =>
+                      classNames(
+                        selected
+                          ? 'border-blue-800 text-blue-800'
+                          : 'border-transparent text-gray-700 hover:border-gray-300 hover:text-gray-800',
+                        'whitespace-nowrap border-b-2 py-6 text-sm font-medium outline-none',
+                      )
+                    }
+                  >
+                    Product details
+                  </Tab>
+                  <Tab
+                    className={({ selected }) =>
+                      classNames(
+                        selected
+                          ? 'border-blue-800 text-blue-800'
+                          : 'border-transparent text-gray-700 hover:border-gray-300 hover:text-gray-800',
+                        'whitespace-nowrap border-b-2 py-6 text-sm font-medium outline-none',
+                      )
+                    }
+                  >
+                    KML Road Map
+                  </Tab>
+                  <Tab
+                    className={({ selected }) =>
+                      classNames(
+                        selected
+                          ? 'border-blue-800 text-blue-800'
+                          : 'border-transparent text-gray-700 hover:border-gray-300 hover:text-gray-800',
+                        'whitespace-nowrap border-b-2 py-6 text-sm font-medium outline-none',
+                      )
+                    }
+                  >
+                    Google Road Map
+                  </Tab>
+                  <Tab
+                    className={({ selected }) =>
+                      classNames(
+                        selected
+                          ? 'border-blue-800 text-blue-800'
+                          : 'border-transparent text-gray-700 hover:border-gray-300 hover:text-gray-800',
+                        'whitespace-nowrap border-b-2 py-6 text-sm font-medium outline-none',
+                      )
+                    }
+                  >
+                    Comments
+                  </Tab>
+                </Tab.List>
+              </div>
+              <Tab.Panels as={Fragment}>
+                <Tab.Panel className="text-sm text-gray-500">
+                  <h3 className="sr-only">Product details</h3>
+                  <div className="mt-0">
+                    <dl className="grid grid-cols-1 sm:grid-cols-2 pt-2">
+                      <div className="border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">City</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.city}</dd>
+                      </div>
+                      <div className="border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">Country</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.country}</dd>
+                      </div>
+                      <div className="border-t border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">Length</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.length}</dd>
+                      </div>
+                      <div className="border-t border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">Road surface</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.roadSurface}</dd>
+                      </div>
+                      <div className="border-t border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">Street name</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.streetName}</dd>
+                      </div>
+                      <div className="border-t border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">Street type</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.streetType}</dd>
+                      </div>
+                      <div className="border-t border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">Technology partner</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.technologyPartner}</dd>
+                      </div>
+                      <div className="border-t border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">File format</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.fileFormat}</dd>
+                      </div>
+                      <div className="border-t border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">Track type</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.trackType}</dd>
+                      </div>
+                      <div className="border-t border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                        <dt className="text-sm font-medium leading-6 text-gray-900">Traffic management</dt>
+                        <dd className="mt-1 text-sm leading-6 text-gray-700 sm:mt-2">{product.trafficManagement}</dd>
+                      </div>
+                    </dl>
+                  </div>
+                </Tab.Panel>
+
+                <Tab.Panel className="pt-10">
+                  <h3 className="sr-only">KML Road Map</h3>
+
+                  <img
+                    src="https://envited.market/gcmedia/serve/reference/3506/xl/0/streckea8.png"
+                    className="w-full h-auto"
+                  />
+                </Tab.Panel>
+
+                <Tab.Panel className="pt-10 -mb-10">
+                  <h3 className="sr-only">Google Road Map</h3>
+
+                  <iframe
+                    src="https://www.google.com/maps/d/u/1/embed?mid=1nt7dEym9fom0bQQkX4JrEQF72Qk4FbE&amp;ehbc=2E312F&amp;noprof=1"
+                    width="770"
+                    height="400"
+                    className="w-full h-96"
+                  />
+                </Tab.Panel>
+
+                <Tab.Panel className="-mb-10">
+                  <h3 className="sr-only">Comments</h3>
+
+                  {reviews.featured.map((review, reviewIdx) => (
+                    <div key={review.id} className="flex space-x-4 text-sm text-gray-500">
+                      <div className="flex-none py-10">
+                        <img src={review.avatarSrc} alt="" className="h-10 w-10 rounded-full bg-gray-100" />
+                      </div>
+                      <div className={classNames(reviewIdx === 0 ? '' : 'border-t border-gray-200', 'py-10')}>
+                        <h3 className="font-medium text-gray-900">{review.author}</h3>
+                        <p>
+                          <time dateTime={review.datetime}>{review.date}</time>
+                        </p>
+
+                        <div
+                          className="prose prose-sm mt-4 max-w-none text-gray-500"
+                          dangerouslySetInnerHTML={{ __html: review.content }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </Tab.Panel>
+              </Tab.Panels>
+            </Tab.Group>
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto mt-16 max-w-2xl sm:mt-16 lg:max-w-none">
+        <div className="flex items-center justify-between space-x-4">
+          <h2 className="text-lg font-medium text-gray-900">More assets from OpenDRIVE</h2>
+          <a href="/assets" className="whitespace-nowrap text-sm font-medium text-blue-900 hover:text-blue-800">
+            View all
+            <span aria-hidden="true"> &rarr;</span>
+          </a>
+        </div>
+        <div className="mt-6 grid grid-cols-1 gap-x-8 gap-y-8 sm:grid-cols-2 sm:gap-y-10 lg:grid-cols-4">
+          {products.map(product => (
+            <div
+              key={product.id}
+              className="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white"
+            >
+              <div className="aspect-h-3 aspect-w-4 bg-gray-200 sm:aspect-none group-hover:opacity-75 sm:h-48">
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt}
+                  className="h-48 w-full object-cover object-center sm:h-48 sm:w-full"
+                />
+              </div>
+              <div className="flex flex-1 flex-col space-y-2 p-4">
+                <p className="text-sm italic text-gray-500">{product.options}</p>
+                <h3 className="text-sm font-medium text-gray-900">
+                  <a href={product.href}>
+                    <span aria-hidden="true" className="absolute inset-0" />
+                    {product.name}
+                  </a>
+                </h3>
+                <p className="text-sm text-gray-500">{product.description}</p>
+                <div className="flex justify-between pt-4">
+                  <p className="text-sm font-medium text-gray-900">{product.price}</p>
+                  <a
+                    href={product.href}
+                    className="whitespace-nowrap text-sm font-medium text-blue-900 hover:text-blue-800"
+                  >
+                    View all
+                    <span aria-hidden="true"> &rarr;</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/envited.ascs.digital/modules/Asset/index.ts b/apps/envited.ascs.digital/modules/Asset/index.ts
new file mode 100644
index 00000000..cd81256d
--- /dev/null
+++ b/apps/envited.ascs.digital/modules/Asset/index.ts
@@ -0,0 +1 @@
+export { Asset } from './Asset'
diff --git a/apps/envited.ascs.digital/modules/Assets/Assets.tsx b/apps/envited.ascs.digital/modules/Assets/Assets.tsx
new file mode 100644
index 00000000..356e3844
--- /dev/null
+++ b/apps/envited.ascs.digital/modules/Assets/Assets.tsx
@@ -0,0 +1,283 @@
+'use client'
+
+import { Dialog, Disclosure, Transition } from '@headlessui/react'
+import { ChevronDownIcon, MinusIcon, PlusIcon } from '@heroicons/react/20/solid'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import { propOr } from 'ramda'
+import { Fragment, useState } from 'react'
+
+const filters = [
+  {
+    id: 'type',
+    name: 'Type',
+    options: [
+      { value: 'OpenCRG', label: 'OpenCRG' },
+      { value: 'OpenDrive', label: 'OpenDrive' },
+      { value: 'OpenSCENARIO', label: 'OpenSCENARIO' },
+      { value: 'OpenSceneGraph', label: 'OpenSceneGraph' },
+      { value: 'Sensor Data', label: 'Sensor Data' },
+      { value: 'Tools', label: 'Tools' },
+      { value: 'Unity', label: 'Unity' },
+      { value: 'Unreal', label: 'Unreal' },
+      { value: 'Unreal Engine (Carla)', label: 'Unreal Engine (Carla)' },
+    ],
+  },
+  {
+    id: 'sizes',
+    name: 'Sizes',
+    options: [
+      { value: 'xs', label: 'XS' },
+      { value: 's', label: 'S' },
+      { value: 'm', label: 'M' },
+      { value: 'l', label: 'L' },
+      { value: 'xl', label: 'XL' },
+      { value: '2xl', label: '2XL' },
+    ],
+  },
+]
+
+const products = [
+  {
+    id: 1,
+    name: 'Motorway Testfield A8 Heimsheim <-> Leonberg (XODR)',
+    href: '/assets/detail',
+    description: 'A map section of the A8 highway from Heimsheim to Leonberg with a total length of 37.91 km. It was',
+    options: 'XODR-3DM-23001',
+    price: '20 xtz',
+    imageSrc: 'https://envited.market/media/OpenDRIVE_A9_final_bO9LFP7.png.500x320_q85_crop-scale.png',
+    imageAlt: 'Eight shirts arranged on table in black, olive, grey, blue, white, red, mustard, and green.',
+  },
+  {
+    id: 2,
+    name: 'San Francisco Sample (Unreal-Carla)',
+    href: '/assets/detail',
+    description:
+      'San Francisco Union Square and adjacent streets. 3D Visualization of San Francisco HD maps, designed based on real-world OpenDRIVE data',
+    options: 'CARLA-TGG-21001',
+    price: '300 xtz',
+    imageSrc: 'https://envited.market/media/Kachel_San_Francisco_unreal.png.500x320_q85_crop-scale.png',
+    imageAlt: 'Front of plain black t-shirt.',
+  },
+]
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export const Assets = () => {
+  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
+
+  return (
+    <>
+      <Transition.Root show={mobileFiltersOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-40 lg:hidden" onClose={setMobileFiltersOpen}>
+          <Transition.Child
+            as={Fragment}
+            enter="transition-opacity ease-linear duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity ease-linear duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black bg-opacity-25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-40 flex">
+            <Transition.Child
+              as={Fragment}
+              enter="transition ease-in-out duration-300 transform"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transition ease-in-out duration-300 transform"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <Dialog.Panel className="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-6 shadow-xl">
+                <div className="flex items-center justify-between px-4">
+                  <h2 className="text-lg font-medium text-gray-900">Filters</h2>
+                  <button
+                    type="button"
+                    className="-mr-2 flex h-10 w-10 items-center justify-center p-2 text-gray-400 hover:text-gray-500"
+                    onClick={() => setMobileFiltersOpen(false)}
+                  >
+                    <span className="sr-only">Close menu</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+
+                {/* Filters */}
+                <form className="mt-4">
+                  {filters.map(section => (
+                    <Disclosure as="div" key={section.name} className="border-t border-gray-200 pb-4 pt-4">
+                      {({ open }) => (
+                        <fieldset>
+                          <legend className="w-full px-2">
+                            <Disclosure.Button className="flex w-full items-center justify-between p-2 text-gray-400 hover:text-gray-500">
+                              <span className="text-sm font-medium text-gray-900">{section.name}</span>
+                              <span className="ml-6 flex h-7 items-center">
+                                <ChevronDownIcon
+                                  className={classNames(open ? '-rotate-180' : 'rotate-0', 'h-5 w-5 transform')}
+                                  aria-hidden="true"
+                                />
+                              </span>
+                            </Disclosure.Button>
+                          </legend>
+                          <Disclosure.Panel className="px-4 pb-2 pt-4">
+                            <div className="space-y-6">
+                              {section.options.map((option, optionIdx) => (
+                                <div key={option.value} className="flex items-center">
+                                  <input
+                                    id={`${section.id}-${optionIdx}-mobile`}
+                                    name={`${section.id}[]`}
+                                    defaultValue={option.value}
+                                    type="checkbox"
+                                    className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                                  />
+                                  <label
+                                    htmlFor={`${section.id}-${optionIdx}-mobile`}
+                                    className="ml-3 text-sm text-gray-500"
+                                  >
+                                    {option.label}
+                                  </label>
+                                </div>
+                              ))}
+                            </div>
+                          </Disclosure.Panel>
+                        </fieldset>
+                      )}
+                    </Disclosure>
+                  ))}
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+
+      <div className="relative isolate overflow-hidden bg-gray-400 py-24 sm:pt-32 sm:pb-10 rounded-xl">
+        <img
+          src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply"
+          alt=""
+          className="absolute inset-0 -z-10 h-full w-full object-cover opacity-40"
+        />
+        <div
+          className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl"
+          aria-hidden="true"
+        >
+          <div
+            className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-blue-900 to-blue-800 opacity-20"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+          />
+        </div>
+        <div
+          className="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu"
+          aria-hidden="true"
+        >
+          <div
+            className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-blue-900 to-blue-800 opacity-20"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+          />
+        </div>
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-5xl lg:mx-0">
+            <h2 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">Assets</h2>
+            <p className="mt-6 text-lg leading-8 text-gray-300">
+              All the data available on the platform are harmonised to the latest standards and can be easily used in
+              your virtual development or testing process. We are providing all partners full transparency. Use the
+              search mask and meta tags to find your desired data and get an good overview about our OpenCRG-,
+              OpenDrive-, OpenSceneGraph- and unity-files as well as software tools.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="pt-12 lg:grid lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
+        <form className="hidden lg:block">
+          {filters.map(section => (
+            <Disclosure as="div" key={section.id} className="border-b border-gray-200 py-6">
+              {({ open }) => (
+                <>
+                  <h3 className="-my-3 flow-root">
+                    <Disclosure.Button className="flex w-full items-center justify-between bg-white py-3 text-sm text-gray-400 hover:text-gray-500">
+                      <span className="font-medium text-gray-900">{section.name}</span>
+                      <span className="ml-6 flex items-center">
+                        {open ? (
+                          <MinusIcon className="h-5 w-5" aria-hidden="true" />
+                        ) : (
+                          <PlusIcon className="h-5 w-5" aria-hidden="true" />
+                        )}
+                      </span>
+                    </Disclosure.Button>
+                  </h3>
+                  <Disclosure.Panel className="pt-6">
+                    <div className="space-y-4">
+                      {section.options.map((option, optionIdx) => (
+                        <div key={option.value} className="flex items-center">
+                          <input
+                            id={`filter-${section.id}-${optionIdx}`}
+                            name={`${section.id}[]`}
+                            defaultValue={option.value}
+                            type="checkbox"
+                            defaultChecked={propOr(false, 'checked')(option)}
+                            className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                          />
+                          <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
+                            {option.label}
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </Disclosure.Panel>
+                </>
+              )}
+            </Disclosure>
+          ))}
+        </form>
+        <div className="lg:col-span-3">
+          <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:gap-x-8 xl:grid-cols-3">
+            {products.map(product => (
+              <div
+                key={product.id}
+                className="group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white"
+              >
+                <div className="aspect-h-3 aspect-w-4 bg-gray-200 sm:aspect-none group-hover:opacity-75 sm:h-48">
+                  <img
+                    src={product.imageSrc}
+                    alt={product.imageAlt}
+                    className="h-48 w-full object-cover object-center sm:h-48 sm:w-full"
+                  />
+                </div>
+                <div className="flex flex-1 flex-col space-y-2 p-4">
+                  <p className="text-sm italic text-gray-500">{product.options}</p>
+                  <h3 className="text-sm font-medium text-gray-900">
+                    <a href={product.href}>
+                      <span aria-hidden="true" className="absolute inset-0" />
+                      {product.name}
+                    </a>
+                  </h3>
+                  <p className="text-sm text-gray-500">{product.description}</p>
+                  <div className="flex justify-between pt-4">
+                    <p className="text-sm font-medium text-gray-900">{product.price}</p>
+                    <a
+                      href={product.href}
+                      className="whitespace-nowrap text-sm font-medium text-blue-900 hover:text-blue-800"
+                    >
+                      View all
+                      <span aria-hidden="true"> &rarr;</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/apps/envited.ascs.digital/modules/Assets/index.ts b/apps/envited.ascs.digital/modules/Assets/index.ts
new file mode 100644
index 00000000..899b1f73
--- /dev/null
+++ b/apps/envited.ascs.digital/modules/Assets/index.ts
@@ -0,0 +1 @@
+export { Assets } from './Assets'
diff --git a/apps/envited.ascs.digital/modules/Footer/Footer.tsx b/apps/envited.ascs.digital/modules/Footer/Footer.tsx
index 55b3ba1d..b7f0891f 100644
--- a/apps/envited.ascs.digital/modules/Footer/Footer.tsx
+++ b/apps/envited.ascs.digital/modules/Footer/Footer.tsx
@@ -20,7 +20,7 @@ const navigation = {
     {
       name: 'X',
       href: '#',
-      icon: props => (
+      icon: (props: any) => (
         <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
           <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
         </svg>
@@ -29,7 +29,7 @@ const navigation = {
     {
       name: 'GitHub',
       href: '#',
-      icon: props => (
+      icon: (props: any) => (
         <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
           <path
             fillRule="evenodd"
diff --git a/apps/envited.ascs.digital/modules/Header/Header.tsx b/apps/envited.ascs.digital/modules/Header/Header.tsx
index f446db37..541166b4 100644
--- a/apps/envited.ascs.digital/modules/Header/Header.tsx
+++ b/apps/envited.ascs.digital/modules/Header/Header.tsx
@@ -1,18 +1,26 @@
 'use client'
 
-import { Button } from '@envited-marketplace/design-system'
+import { Button, Size } from '@envited-marketplace/design-system'
 import Image from 'next/image'
 import Link from 'next/link'
 import { FC } from 'react'
 
 import { useTranslation } from '../../common/i18n'
-import { ThemeToggle } from '../ThemeToggle'
+
+// import { ThemeToggle } from '../ThemeToggle'
 
 export interface HeaderProps {}
 
 export const Header: FC<HeaderProps> = () => {
   const { t } = useTranslation('Header')
 
+  const navigation = [
+    { name: 'Home', href: '/' },
+    { name: 'Assets', href: '/assets' },
+    { name: 'Members', href: '/members' },
+    { name: 'Contact', href: '#' },
+  ]
+
   return (
     <header className="py-10">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -22,9 +30,15 @@ export const Header: FC<HeaderProps> = () => {
               <Image src="/envited-logo.png" alt="ENVITED" priority height={40} width={170} />
             </Link>
           </div>
+          <div className="hidden lg:flex lg:gap-x-12 lg:items-center">
+            {navigation.map(item => (
+              <a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-gray-900">
+                {item.name}
+              </a>
+            ))}
+          </div>
           <div className="flex items-center gap-x-5 md:gap-x-8">
-            <ThemeToggle />
-            <Button onClick={() => {}}>
+            <Button onClick={() => {}} size={Size.small}>
               <span>{t('[Button] connect')}</span>
             </Button>
           </div>