Wiggle animation on the course banner

pull/8446/head
Kamran Ahmed 3 days ago
parent 45059998c0
commit 1a5b6976c2
  1. 2
      src/components/AuthenticationFlow/CourseLoginPopup.tsx
  2. 7
      src/components/SQLCourse/BuyButton.tsx
  3. 5
      src/components/SQLCourse/CourseAnnouncement.tsx
  4. 9
      tailwind.config.cjs

@ -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

@ -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;
}

@ -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>

@ -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: {

Loading…
Cancel
Save