Wiggle animation on the course banner

src/components/AuthenticationFlow/CourseLoginPopup.tsx

@@ -81,7 +81,7 @@ export function CourseLoginPopup(props: CourseLoginPopupProps) {
     <Modal onClose={onClose} bodyClassName="p-5 h-auto">
       <div className="mb-7 text-center">
         <p className="mb-3.5 pt-2 text-2xl font-semibold leading-5 text-slate-900">
-          Create or login to your account
+          Create or login to Enroll
         </p>
         <p className="mt-2 text-sm leading-4 text-slate-600">
           Login or sign up for an account to start learning

src/components/SQLCourse/BuyButton.tsx

@@ -15,6 +15,7 @@ import { useToast } from '../../hooks/use-toast';
 import { httpPost } from '../../lib/query-http';
 import { deleteUrlParam, getUrlParams } from '../../lib/browser';
 import { VideoModal } from '../VideoModal';
+import { showLoginPopup } from '../../lib/popup';
 
 export const SQL_COURSE_SLUG = 'sql';
 
@@ -128,11 +129,15 @@ export function BuyButton(props: BuyButtonProps) {
   }, []);
 
   const isLoadingPricing =
-    isLoadingCourse || !coursePricing || isLoadingCourseProgress;
+    isLoadingCourse ||
+    !coursePricing ||
+    isLoadingCourseProgress ||
+    isCreatingCheckoutSession;
   const isAlreadyEnrolled = !!courseProgress?.enrolledAt;
 
   function initPurchase() {
     if (!isLoggedIn()) {
+      setIsLoginPopupOpen(true);
       return;
     }
 

src/components/SQLCourse/CourseAnnouncement.tsx

@@ -26,7 +26,10 @@ export function CourseAnnouncement() {
             </span>
             <span className="block sm:hidden">Announcing our SQL course</span>
           </span>
-          <span className="items-center gap-1.5 rounded-full bg-black px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-white hover:bg-zinc-800 sm:px-3 sm:py-1">
+          <span className={cn(
+            "items-center gap-1.5 rounded-full bg-black px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-white hover:bg-zinc-800 sm:px-3 sm:py-1",
+            isVisible && "animate-wiggle [animation-delay:0.25s]"
+          )}>
             <span className="mr-1.5 hidden sm:inline">Start Learning</span>
             <span className="mr-1.5 inline sm:hidden">Visit</span>
             <span className="">→</span>

tailwind.config.cjs

@@ -47,12 +47,21 @@ module.exports = {
             transform: "translate(-50%,-40%) scale(1)",
           },
         },
+        wiggle: {
+          '0%': { transform: 'rotate(-4deg)' },
+          '20%': { transform: 'rotate(4deg)' },
+          '40%': { transform: 'rotate(-3deg)' },
+          '60%': { transform: 'rotate(3deg)' },
+          '80%': { transform: 'rotate(-2deg)' },
+          '100%': { transform: 'rotate(0deg)' },
+        },
       },
       animation: {
         'fade-slide-up':
           'fade-slide-up 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards',
         'fade-in': 'fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards',
         spotlight: "spotlight 2s ease 0.25s 1 forwards",
+        wiggle: 'wiggle 0.5s ease-in-out forwards',
       },
     },
     container: {