feat(Auth screen): Improve copy and add animation (#7429)

* sign up to sign up for free

* login page animation and copy

packages/insomnia/src/ui/routes/auth.login.tsx

@@ -68,11 +68,20 @@ const Login = () => {
       className='flex flex-col gap-[--padding-md]'
     >
       <p className='text-center text-[--color-font] text-2xl py-[--padding-md]'>
-        Welcome to Insomnia
-      </p>
-      <p className='text-[--color-font] text-sm'>
-        Discover Local, Cloud or Git storage for your projects.
+        Get started for free
       </p>
+      <div className="font-extrabold text-sm [text-wrap:balance]">
+        <span className="text-indigo-300 inline-flex flex-col h-[calc(theme(fontSize.sm)*theme(lineHeight.tight))] overflow-hidden">
+          <ul className="block animate-text-slide-4 text-right leading-tight [&_li]:block">
+            <li>Debug</li>
+            <li>Design</li>
+            <li>Test</li>
+            <li>Mock</li>
+            <li aria-hidden="true">Debug</li>
+          </ul>
+        </span>
+        <span className='ml-1 text-[--color-font]'>APIs locally, on Git or in the Cloud.</span>
+      </div>
       <Button
         aria-label='Continue with Google'
         onPress={() => {

packages/insomnia/src/ui/routes/organization.tsx

@@ -592,7 +592,7 @@ const OrganizationRoute = () => {
                     className="px-4 py-1 flex items-center justify-center gap-2 aria-pressed:bg-[rgba(var(--color-surprise-rgb),0.8)] focus:bg-[rgba(var(--color-surprise-rgb),0.9)] bg-[--color-surprise] font-semibold rounded-sm text-[--color-font-surprise] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
                     to="/auth/login"
                   >
-                    Sign Up
+                      Sign up for free
                   </NavLink>
                 </Fragment>
               )}

packages/insomnia/tailwind.config.js

@@ -5,7 +5,30 @@ module.exports = {
     './src/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        'text-slide-4': 'text-slide-4 7s cubic-bezier(0.83, 0, 0.17, 1) infinite',
+      },
+      keyframes: {
+        'text-slide-4': {
+          '0%, 20%': {
+            transform: 'translateY(0%)',
+          },
+          '25%, 45%': {
+            transform: 'translateY(-20%)',
+          },
+          '50%, 70%': {
+            transform: 'translateY(-40%)',
+          },
+          '75%, 95%': {
+            transform: 'translateY(-60%)',
+          },
+          '100%': {
+            transform: 'translateY(-80%)',
+          },
+        },
+      },
+    },
   },
   plugins: [
     require('@tailwindcss/typography'),