adjusted design and animation for 'mint now' button

taikoxyz · Apr 29, 2024 · d47e9f3 · d47e9f3
1 parent 3db0718
commit d47e9f3
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 10 deletions.
diff --git a/packages/taikoon-ui/src/components/AnimatedArrow/AnimatedArrow.svelte b/packages/taikoon-ui/src/components/AnimatedArrow/AnimatedArrow.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Icons } from '$components/core/Icons';
+  import { classNames } from '$lib/util/classNames';
+  export let isHovered = false;
+  const ArrowIcon = Icons.ArrowRightFilled;
+
+  const wrapperClasses = classNames(
+    'bg-primary-content',
+    'rounded-full',
+    'w-[32px]',
+    'h-[32px]',
+    'flex',
+    'items-center',
+    'justify-center',
+    'overflow-hidden',
+  );
+
+  $: arrowsWrapper = classNames(
+    'w-full',
+    'h-full',
+    'relative',
+
+    'flex',
+    'items-center',
+    'justify-center',
+    'transition',
+    'transform',
+    isHovered ? 'translate-x-[100%]' : null,
+    'ease-in-out',
+    'duration-300',
+  );
+
+  const arrowClasses = classNames('absolute');
+
+  const leftArrowClasses = classNames(arrowClasses, 'left-[-100%]');
+
+  const rightArrowClasses = classNames(arrowClasses);
+</script>
+
+<div class={wrapperClasses}>
+  <div class={arrowsWrapper}>
+    <ArrowIcon size="32" class={leftArrowClasses} />
+    <ArrowIcon size="32" class={rightArrowClasses} />
+  </div>
+</div>
diff --git a/packages/taikoon-ui/src/components/AnimatedArrow/index.ts b/packages/taikoon-ui/src/components/AnimatedArrow/index.ts
@@ -0,0 +1 @@
+export { default as AnimatedArrow } from './AnimatedArrow.svelte';
diff --git a/packages/taikoon-ui/src/components/core/Icons/ArrowRightFilled.svelte b/packages/taikoon-ui/src/components/core/Icons/ArrowRightFilled.svelte
@@ -46,23 +46,22 @@
       <desc id={desc.id}>{desc.desc}</desc>
     {/if}
 
-    <circle cx="16" cy="16" r="16" stroke="none" fill={color} />
     <path
       d="M17.418 12.459L20.9588 15.9998L17.418 19.5407"
       stroke="#E81899"
       stroke-width="1.5"
       stroke-miterlimit="10"
       stroke-linecap="round"
       stroke-linejoin="round"
-      fill="none" />
+      fill={color} />
     <path
       d="M11.041 16H20.8585"
       stroke="#E81899"
       stroke-width="1.5"
       stroke-miterlimit="10"
       stroke-linecap="round"
       stroke-linejoin="round"
-      fill="none" />
+      fill={color} />
   </svg>
 {:else}
   <svg
@@ -82,22 +81,21 @@
       <desc id={desc.id}>{desc.desc}</desc>
     {/if}
 
-    <circle cx="16" cy="16" r="16" fill={color} />
     <path
       d="M17.418 12.459L20.9588 15.9998L17.418 19.5407"
       stroke="#E81899"
       stroke-width="1.5"
       stroke-miterlimit="10"
       stroke-linecap="round"
       stroke-linejoin="round"
-      fill="none" />
+      fill={color} />
     <path
       d="M11.041 16H20.8585"
       stroke="#E81899"
       stroke-width="1.5"
       stroke-miterlimit="10"
       stroke-linecap="round"
       stroke-linejoin="round"
-      fill="none" />
+      fill={color} />
   </svg>
 {/if}
diff --git a/packages/taikoon-ui/src/components/sections/Heading.section.svelte b/packages/taikoon-ui/src/components/sections/Heading.section.svelte
@@ -3,10 +3,10 @@
 
   import LogoBlack from '$assets/taikoons-big-black.png';
   import LogoWhite from '$assets/taikoons-big-white.png';
+  import { AnimatedArrow } from '$components/AnimatedArrow';
   import { ResponsiveController } from '$components/core/ResponsiveController';
   import { classNames } from '$lib/util/classNames';
   import { Theme, theme } from '$stores/theme';
-  import { Button } from '$ui/Button';
   import { Section } from '$ui/Section';
 
   $: isDarkTheme = $theme === Theme.DARK;
@@ -16,14 +16,37 @@
 
   const sectionClasses = 'items-center justify-center';
   const imageClasses = classNames('w-full', 'h-auto', 'mb-20');
+
+  const mintNowButtonClasses = classNames(
+    'bg-[#E81899]',
+    'font-sans',
+    '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;
 </script>
 
 <Section animated={true} width={windowSize === 'sm' ? 'lg' : 'md'} class={sectionClasses}>
   <img src={logo} alt="Taikoons Logo" class={imageClasses} />
 
-  <Button size="xl" wide type="primary" iconRight="ArrowRightFilled">
-    <a href="/mint">{$t('buttons.mintNow')}</a>
-  </Button>
+  <a
+    href="/mint"
+    on:mouseenter={() => (isHovered = true)}
+    on:mouseleave={() => (isHovered = false)}
+    class={mintNowButtonClasses}>
+    {$t('buttons.mintNow')}
+    <AnimatedArrow {isHovered} />
+  </a>
 
   <slot />
 </Section>

diff --git a/packages/taikoon-ui/tailwind.config.js b/packages/taikoon-ui/tailwind.config.js
@@ -32,6 +32,10 @@ export default {
                     '50%': { opacity: '0' },
                     '100%': { opacity: '1' },
                 },
+                'arrows-x-animation': {
+                    '0%': { left: '0'},
+                    '100%': { left: '100%'},
+                }
             },
             animation: {
                 'cell-pulse-3': 'cell-pulse-animation 3s ease-in infinite',
@@ -40,6 +44,8 @@ export default {
                 'cell-pulse-negative-3': 'cell-pulse-negative-animation 3s ease-in infinite',
                 'cell-pulse-negative-5': 'cell-pulse-negative-animation 5s ease-in infinite',
                 'cell-pulse-negative-7': 'cell-pulse-negative-animation 7s ease-in infinite',
+                'arrows-x-3': 'arrows-x-animation 300ms linear forwards',
+                'arrows-x-3-reset': 'arrows-x-animation 300ms linear reverse',
             },
             colors: {
                 /***************
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as AnimatedArrow } from './AnimatedArrow.svelte';