feat(landing): SharingAnimation

src/components/ui/buttons/SecondaryButton.tsx

@@ -36,4 +36,4 @@ const SecondaryButton = forwardRef<HTMLButtonElement, SecondaryButtonProps>(
 )
 SecondaryButton.displayName = 'SecondaryButton'
 
-export { SecondaryButton }
+export { SecondaryButton, secondaryButtonVariants }

src/features/landing/sections/FeaturesSection/SharingAnimation.tsx

@@ -0,0 +1,31 @@
+import { ShareIcon, secondaryButtonVariants } from '@/components/ui'
+import smileyArrowImg from '../../assets/features-sharing-img.svg'
+import cursorIcon from '../../assets/features-sharing-cursor.svg'
+import { AnimationItem } from './animations'
+import { cn } from '@/utils'
+
+export function SharingAnimation() {
+  return (
+    <div className='flex h-full items-center justify-center gap-3'>
+      <div className='relative'>
+        <AnimationItem
+          className={cn(secondaryButtonVariants({ size: 'iconSm' }), 'animate-landing-features-sharing-button')}
+          shouldRegisterAnimationEnd={false}
+          block='sharing'
+        >
+          <ShareIcon />
+        </AnimationItem>
+        <AnimationItem
+          block='sharing'
+          shouldRegisterAnimationEnd={false}
+          className='animate-landing-features-sharing-cursor absolute left-[70%] top-[80%]'
+        >
+          <img src={cursorIcon} alt='' />
+        </AnimationItem>
+      </div>
+      <AnimationItem block='sharing' className='animate-landing-features-sharing-img [clip-path:inset(0_100%_0_0)]'>
+        <img src={smileyArrowImg} alt='' />
+      </AnimationItem>
+    </div>
+  )
+}

src/features/landing/sections/FeaturesSection/index.tsx

@@ -1,10 +1,11 @@
 import { ReactNode } from '@tanstack/react-router'
 import { Container } from '../../shared/Container'
 import { LeaderboardIcon, ResultIcon, ScrambleIcon, ShareIcon } from '../../shared/icons'
-import { AnimationsController, BlockIntersectionWrapper, AnimationItem } from './animations'
+import { AnimationsController, BlockIntersectionWrapper } from './animations'
 import { ResultsAnimation } from './ResultsAnimation'
 import { ScramblesAnimation } from './ScramblesAnimation'
 import { LeaderboardsAnimation } from './LeaderboardsAnimation'
+import { SharingAnimation } from './SharingAnimation'
 
 export type BlockType = 'results' | 'scrambles' | 'leaderboards' | 'sharing'
 export function FeaturesSection({ className, id }: { className: string; id: string }) {
@@ -43,7 +44,7 @@ export function FeaturesSection({ className, id }: { className: string; id: stri
                 title='Share your solves'
                 description='Easily share your solves with friends and challenge them to beat your time!'
                 icon={<ShareIcon />}
-                visualization={<FakeAnimation block='sharing' />}
+                visualization={<SharingAnimation />}
               />
             </BlockIntersectionWrapper>
           </ul>
@@ -65,17 +66,13 @@ function Feature({
   visualization: ReactNode
 }) {
   return (
-    <li className='flex h-full flex-col rounded-3xl bg-black-100 px-10 pb-10'>
+    <li className='flex h-full flex-col overflow-clip rounded-3xl bg-black-100 px-10 pb-10'>
       <div className='flex flex-1 gap-28'>
         <div className='self-end pb-6'>{icon}</div>
-        <div className='-mb-2 -ml-2 -mr-10 flex-1 border border-red-80'>{visualization}</div>
+        <div className='-mb-2 -ml-2 -mr-10 flex-1'>{visualization}</div>
       </div>
       <h3 className='landing-h3 mb-2'>{title}</h3>
       <p>{description}</p>
     </li>
   )
 }
-
-function FakeAnimation({ block }: { block: BlockType }) {
-  return <AnimationItem block={block} className='animate-fake h-full w-full'></AnimationItem>
-}

tailwind.config.ts

@@ -108,6 +108,35 @@ export default {
           from: { clipPath: 'inset(0 0 100%)' },
           to: { clipPath: 'inset(0)' },
         },
+        'landing-features-sharing-cursor': {
+          '0%': {
+            transform: 'translateY(300%)',
+            opacity: '0',
+          },
+          '31%,75%': {
+            transform: 'translateY(0)',
+            opacity: '100%',
+          },
+          '100%': {
+            transform: 'translateY(200%)',
+            opacity: '0',
+          },
+        },
+        'landing-features-sharing-button': {
+          '0%,99%': {
+            backgroundColor: '#565698',
+            border: '1px solid #565698',
+          },
+          '100%': {
+            backgroundColor: '#393966',
+            border: '1px solid #393966',
+            cursor: 'pointer',
+          },
+        },
+        'landing-features-sharing-img': {
+          from: { clipPath: 'inset(0 100% 0 0)' },
+          to: { clipPath: 'inset(0)' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
@@ -117,7 +146,9 @@ export default {
         'landing-features-results': 'landing-features-results linear 3s forwards',
         'landing-features-scrambles': 'landing-features-scrambles linear 2.7s forwards',
         'landing-features-leaderboards': 'landing-features-leaderboards ease-in-out 1s forwards var(--delay)',
-        fake: 'fake linear 3s forwards',
+        'landing-features-sharing-cursor': 'landing-features-sharing-cursor ease-out 3.2s forwards',
+        'landing-features-sharing-button': 'landing-features-sharing-button ease-out 0.8s forwards 1s',
+        'landing-features-sharing-img': 'landing-features-sharing-img linear 1s forwards 3.3s',
       },
       spacing: {
         15: '3.75rem',