From 37ed9acbd7b3c197862f357c65b81fd1edd6f15a Mon Sep 17 00:00:00 2001
From: Bohdan Chornokondratenko <bogdan.chornocondratenko@gmail.com>
Date: Fri, 23 Aug 2024 10:55:56 +0200
Subject: [PATCH] feat(landing): Features results animation WiP

---
 .../landing/sections/FeaturesSection.tsx      | 128 +++++++++++++++++-
 tailwind.config.ts                            |  18 +++
 2 files changed, 143 insertions(+), 3 deletions(-)

diff --git a/src/features/landing/sections/FeaturesSection.tsx b/src/features/landing/sections/FeaturesSection.tsx
index f537436..9afa79e 100644
--- a/src/features/landing/sections/FeaturesSection.tsx
+++ b/src/features/landing/sections/FeaturesSection.tsx
@@ -1,18 +1,19 @@
 import { ReactNode } from '@tanstack/react-router'
 import { Container } from '../shared/Container'
 import { LeaderboardIcon, ResultIcon, ScrambleIcon, ShareIcon } from '../shared/icons'
+import { CSSProperties } from 'react'
 
 export function FeaturesSection({ className, id }: { className: string; id: string }) {
   return (
     <Container className={className}>
       <section id={id} className='landing-offset-anchor'>
         <h2 className='landing-h2 mb-14 text-center'>The problem we solve</h2>
-        <ul className='grid grid-cols-2 grid-rows-[18.75rem,18.75rem] gap-3'>
+        <ul className='grid grid-cols-2 grid-rows-[repeat(2,20rem)] gap-3'>
           <Feature
             title='Automated results'
             description='No more manual entering of results in Excel. Everything is automated!'
             icon={<ResultIcon />}
-            visualization='visual'
+            visualization={<ResultsAnimation />}
           />
           <Feature
             title='Instant scrambles'
@@ -53,10 +54,131 @@ function Feature({
     <li className='flex flex-col 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 -mr-10 flex-1 border border-red-80'>{visualization}</div>
+        <div className='-mb-2 -ml-2 -mr-10 flex-1 border border-red-80'>{visualization}</div>
       </div>
       <h3 className='landing-h3 mb-2'>{title}</h3>
       <p>{description}</p>
     </li>
   )
 }
+
+function ResultsAnimation() {
+  return (
+    <div className='relative h-full'>
+      <ResultsAnimationItem
+        fromRotation='18deg'
+        fromLeft='-5%'
+        fromTop='-100%'
+        transitionRotation='-31deg'
+        transitionLeft='-3%'
+        transitionTop='30%'
+        toRotation='11deg'
+        toLeft='-5%'
+        toTop='52%'
+      >
+        Average time
+      </ResultsAnimationItem>
+      <ResultsAnimationItem
+        fromRotation='-9.5deg'
+        fromLeft='40%'
+        fromTop='-75%'
+        transitionRotation='41.5deg'
+        transitionLeft='46%'
+        transitionTop='57%'
+        toRotation='-13deg'
+        toLeft='40%'
+        toTop='65%'
+      >
+        Single time
+      </ResultsAnimationItem>
+      <ResultsAnimationItem
+        fromRotation='10.5deg'
+        fromLeft='25%'
+        fromTop='-120%'
+        transitionRotation='-58deg'
+        transitionLeft='25%'
+        transitionTop='18%'
+      >
+        Attempt 1
+      </ResultsAnimationItem>
+      <ResultsAnimationItem
+        fromRotation='-21.5deg'
+        fromLeft='13%'
+        fromTop='-60%'
+        transitionRotation='29deg'
+        transitionLeft='18%'
+        transitionTop='68%'
+      >
+        Attempt 2
+      </ResultsAnimationItem>
+      <ResultsAnimationItem
+        fromRotation='22deg'
+        fromLeft='68%'
+        fromTop='-50%'
+        transitionRotation='-20deg'
+        transitionLeft='75%'
+        transitionTop='55%'
+      >
+        Attempt 3
+      </ResultsAnimationItem>
+      <ResultsAnimationItem
+        fromRotation='-21.5deg'
+        fromLeft='58%'
+        fromTop='-120%'
+        transitionRotation='45deg'
+        transitionLeft='52%'
+        transitionTop='15%'
+      >
+        Attempt 4
+      </ResultsAnimationItem>
+      <ResultsAnimationItem
+        fromRotation='42deg'
+        fromLeft='74%'
+        fromTop='-85%'
+        transitionRotation='-16.5deg'
+        transitionLeft='76%'
+        transitionTop='6%'
+      >
+        Attempt 5
+      </ResultsAnimationItem>
+    </div>
+  )
+}
+
+function ResultsAnimationItem(
+  props: Record<
+    | 'fromLeft'
+    | 'fromTop'
+    | 'fromRotation'
+    | 'transitionLeft'
+    | 'transitionTop'
+    | 'transitionRotation'
+    | 'toLeft'
+    | 'toTop'
+    | 'toRotation',
+    string
+  > & {
+    children: string
+  },
+) {
+  return (
+    <div
+      style={
+        {
+          '--from-left': props.fromLeft,
+          '--from-top': props.fromTop,
+          '--from-rotation': props.fromRotation,
+          '--transition-left': props.transitionLeft,
+          '--transition-top': props.transitionTop,
+          '--transition-rotation': props.transitionRotation,
+          '--to-left': props.toLeft,
+          '--to-top': props.toTop,
+          '--to-rotation': props.toRotation,
+        } as CSSProperties
+      }
+      className='animate-landing-falling-text absolute whitespace-nowrap rounded-3xl border border-secondary-20 px-6 py-1 text-[0.875rem] text-grey-20'
+    >
+      <div className='mb-[-.1em] pt-[.1em]'>{props.children}</div>
+    </div>
+  )
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9f2e107..a037449 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -79,12 +79,30 @@ export default {
             top: 'var(--to-top)',
           },
         },
+        'landing-falling-text': {
+          '0%,100%': {
+            left: 'var(--transition-left)',
+            top: 'var(--transition-top)',
+            transform: 'rotate(var(--transition-rotation))',
+          },
+          // '66.6%': {
+          //   left: 'var(--transition-left)',
+          //   top: 'var(--transition-top)',
+          //   transform: 'rotate(var(--transition-rotation))',
+          // },
+          // '100%': {
+          //   left: 'var(--to-left)',
+          //   top: 'var(--to-top)',
+          //   transform: 'rotate(var(--to-rotation))',
+          // },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
         'landing-alternating-text': 'landing-alternating-text 6s linear infinite',
         'landing-blobs': 'landing-blobs 20s linear infinite',
+        'landing-falling-text': 'landing-falling-text 3s infinite',
       },
       spacing: {
         15: '3.75rem',