feat(nfts): taikoon ui fixes, v3

packages/taikoon-ui/src/components/AnimatedTaikoon/AnimatedEyes.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  export let size = 'full';
+  export let role = 'img';
+  export let ariaLabel = 'animated taikoon';
+  export let title = {
+    id: `animated-taikoon-title-${Math.random().toString(36).substring(7)}`,
+    title: ariaLabel,
+  };
+  export let desc = {
+    id: `animated-taikoon-desc-${Math.random().toString(36).substring(7)}`,
+    desc: 'An animated taikoon',
+  };
+  import { onDestroy, onMount } from 'svelte';
+
+  let ariaDescribedby = `${title.id || ''} ${desc.id || ''}`;
+  let hasDescription = false;
+  $: if (title.id || desc.id) {
+    hasDescription = true;
+  } else {
+    hasDescription = false;
+  }
+
+  $: primaryColor = '#E81899'; // primary
+  $: secondaryColor = '#FF6FC8'; // secondary
+
+  const colorPairs = [
+    { primary: '#4752ef', secondary: '#fae600' },
+    { primary: '#6d74bc', secondary: '#e71001' },
+    { primary: '#e501e7', secondary: '#0040fa' },
+  ];
+
+  $: colorPairIndex = 0;
+
+  let animationIntervalId: any;
+  onMount(() => {
+    animationIntervalId = setInterval(
+      () => {
+        colorPairIndex = (Math.random() * colorPairs.length) | 0;
+        primaryColor = colorPairs[colorPairIndex].primary;
+        secondaryColor = colorPairs[colorPairIndex].secondary;
+      },
+      250 * Math.random() + 500,
+      //750
+    );
+  });
+
+  onDestroy(() => {
+    animationIntervalId && clearInterval(animationIntervalId);
+  });
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {...$$restProps}
+  {role}
+  width={size}
+  height={size}
+  stroke="none"
+  aria-label={ariaLabel}
+  aria-describedby={hasDescription ? ariaDescribedby : undefined}
+  viewBox="91 61 149 98">
+  {#if title.id && title.title}
+    <title id={title.id}>{title.title}</title>
+  {/if}
+  {#if desc.id && desc.desc}
+    <desc id={desc.id}>{desc.desc}</desc>
+  {/if}
+  <rect stroke="none" x="106.895" y="93.4868" width="50.1963" height="50.1963" fill="white" />
+  <rect stroke="none" x="124.464" y="93.4868" width="32.6276" height="32.6276" fill={secondaryColor} />
+  <rect stroke="none" x="156" y="92" width="18" height="52" fill="#0B101B" />
+  <rect stroke="none" x="173.405" y="93.4868" width="50.1963" height="50.1963" fill="white" />
+  <rect stroke="none" x="190.974" y="93.4868" width="32.6276" height="32.6276" fill={secondaryColor} />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    stroke="none"
+    d="M223.601 77.173H106.895V93.4868H223.601V77.173ZM140.778 93.4869H157.091V109.801H140.778V93.4869ZM207.288 93.4869H223.601V109.801H207.288V93.4869Z"
+    fill="#0B101B" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    stroke="none"
+    d="M223.602 60.8594H239.915V143.683L239.915 159.997H173.405V143.683L223.602 143.683L223.602 77.1732H106.895V143.683H157.091V159.997H90.5812V143.683H90.5813V60.8595H106.895V60.8594H223.602Z"
+    fill={primaryColor} />
+</svg>

packages/taikoon-ui/src/components/AnimatedTaikoon/index.ts

@@ -1 +1,2 @@
+export { default as AnimatedEyes } from './AnimatedEyes.svelte';
 export { default as AnimatedTaikoon } from './AnimatedTaikoon.svelte';

packages/taikoon-ui/src/components/Collection/Collection.svelte

@@ -12,6 +12,8 @@
   export let tokenIds: number[] = [];
   let windowSize: 'sm' | 'md' | 'lg' = 'md';
 
+  export let disableClick = false;
+
   export let title: string = 'The Collection';
 
   export let isLoading = false;
@@ -45,7 +47,7 @@
     <div class={taikoonsWrapperClasses}>
       {#each tokenIds as tokenId}
         <a
-          href={`#${tokenId}`}
+          href={disableClick ? '#' : `#${tokenId}`}
           class={classNames('w-full', 'rounded-xl', 'lg:rounded-3xl', 'md:rounded-2xl', 'overflow-hidden')}>
           <NftRenderer size="full" {tokenId} />
         </a>

packages/taikoon-ui/src/components/sections/Information.section.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
+  import { AnimatedEyes } from '$components/AnimatedTaikoon';
   import { classNames } from '$lib/util/classNames';
   import { Section } from '$ui/Section';
 
@@ -17,22 +18,35 @@
     'leading-relaxed',
   );
   const contentClasses = classNames(
+    'w-3/4',
     'md:font-normal',
     'md:text-[57px]/[64px]',
     'text-content-primary',
     'font-medium',
     'font-clash-grotesk',
     'text-4xl',
   );
+
+  $: eyes = Array.from({ length: 12 }, (_, i) => i);
 </script>
 
-<Section height="min">
-  <p class={titleClasses}>
-    {$t('content.sections.information.title')}
-  </p>
+<Section>
+  <div class={classNames('py-32')}>
+    <p class={titleClasses}>
+      {$t('content.sections.information.title')}
+    </p>
+
+    <div class={contentClasses}>
+      {$t('content.sections.information.text')}
+    </div>
 
-  <div class={contentClasses}>
-    {$t('content.sections.information.text')}
+    <div class={classNames('w-full', 'h-min', 'flex', 'absolute', 'left-0', 'bottom-0')}>
+      <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+      {#each eyes as _}
+        <div class={classNames('w-1/12', 'h-max', 'flex', 'justify-center', 'items-center')}>
+          <AnimatedEyes />
+        </div>
+      {/each}
+    </div>
   </div>
-  <slot />
 </Section>

packages/taikoon-ui/src/components/sections/Preview.section.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { AnimatedArrow } from '$components/AnimatedArrow';
+  import { Collection } from '$components/Collection';
+  import { Page } from '$components/Page';
+  import { classNames } from '$lib/util/classNames';
+  import { Section } from '$ui/Section';
+
+  $: tokenIds = [] as number[];
+
+  onMount(async () => {
+    tokenIds = Array.from({ length: 50 }, (_, i) => i + 1);
+  });
+
+  const titleClasses = classNames(
+    'w-full',
+    'text-left',
+    'text-primary',
+    'mb-4',
+    'uppercase',
+    'tracking-normal',
+    'text-[16px]/[24px]',
+    'font-bold',
+    'font-sans',
+    'leading-relaxed',
+  );
+
+  const titleRowClasses = classNames('flex', 'flex-row', 'justify-between', 'items-center', 'mb-12');
+
+  const bottomRowClasses = classNames(
+    'h-[10vh]',
+    'py-6',
+    'w-full',
+    'flex',
+    'flex-row',
+    'justify-center',
+    'items-center',
+  );
+
+  const collectionTitleClasses = classNames('text-[57px]/[64px]', 'font-clash-grotesk', 'font-medium');
+
+  const exploreMoreButtonClasses = classNames(
+    'bg-[#E81899]',
+    'font-sans',
+    'w-max',
+    'text-[#F3F3F3]',
+    'px-3',
+    'py-2',
+    'rounded-full',
+    'flex',
+    'flex-row',
+    'items-center',
+    'justify-center',
+    'text-base',
+    'font-bold',
+    'gap-2.5',
+    'hover:bg-[#C8047D]',
+  );
+
+  const viewMoreButtonClasses = classNames(
+    'border',
+    'border-primary',
+    'font-sans',
+    'w-max',
+    'text-[#F3F3F3]',
+    'px-3',
+    'py-2',
+    'rounded-full',
+    'flex',
+    'flex-row',
+    'items-center',
+    'justify-center',
+    'text-base',
+    'font-bold',
+    'gap-2.5',
+    'hover:bg-[#C8047D]',
+  );
+
+  $: isHovered = false;
+
+  const topRowClasses = classNames('absolute', 'z-50', 'top-32', 'left-0', 'px-16', 'w-full');
+
+  const collectionWrapperClasses = classNames('w-full', 'h-[90vh]');
+</script>
+
+<Page class="z-0">
+  <Section animated class="relative" width="xl">
+    <div class={collectionWrapperClasses}>
+      <Collection disableClick={true} {tokenIds} title="The 888 Collection" />
+    </div>
+    <div class={topRowClasses}>
+      <p class={titleClasses}>Explore Taikoons</p>
+
+      <div class={titleRowClasses}>
+        <div class={collectionTitleClasses}></div>
+
+        <a
+          href="/collection"
+          on:mouseenter={() => (isHovered = true)}
+          on:mouseleave={() => (isHovered = false)}
+          class={exploreMoreButtonClasses}>
+          Explore More
+          <AnimatedArrow {isHovered} />
+        </a>
+      </div>
+    </div>
+
+    <div class={bottomRowClasses}>
+      <a
+        href="/collection"
+        on:mouseenter={() => (isHovered = true)}
+        on:mouseleave={() => (isHovered = false)}
+        class={viewMoreButtonClasses}>
+        View More
+        <AnimatedArrow {isHovered} />
+      </a>
+    </div>
+  </Section>
+</Page>

packages/taikoon-ui/src/components/sections/index.ts

@@ -4,3 +4,4 @@ export { default as FaqSection } from './Faq.section.svelte';
 export { default as FooterSection } from './Footer.section.svelte';
 export { default as HeadingSection } from './Heading.section.svelte';
 export { default as InformationSection } from './Information.section.svelte';
+export { default as PreviewSection } from './Preview.section.svelte';

packages/taikoon-ui/src/routes/+page.svelte

@@ -7,6 +7,7 @@
     FooterSection,
     HeadingSection,
     InformationSection,
+    PreviewSection,
   } from '$components/sections';
   import isCountdownActive from '$lib/util/isCountdownActive';
   import { Button } from '$ui/Button';
@@ -41,6 +42,7 @@
     </HeadingSection>
   {/if}
   <InformationSection />
+  <PreviewSection />
   <div bind:this={scrollTarget}>
     <FaqSection />
   </div>

packages/taikoon-ui/tailwind.config.js

@@ -1,5 +1,6 @@
 import UiLibConfig from '@taiko/ui-lib/tailwind'
 import daisyuiPlugin from 'daisyui'
+import UiLibConfig from '@taiko/ui-lib/tailwind'
 
 /** @type {import('tailwindcss').Config} */
 export default {