feat: add carousel in testimonials and animation in license card

Author: arunjaindev

src/Common/Helper.tsx

@@ -1078,5 +1078,8 @@ export const getHashedValue = async (value: string): Promise<string | null> => {
     }
 }
 
-export const getTTLInHumanReadableFormat = (ttl: number): string =>
-    moment.duration(Math.abs(ttl), 'seconds').humanize(false)
+export const getTTLInHumanReadableFormat = (ttl: number): string => {
+    const humanizedDuration = moment.duration(Math.abs(ttl), 'seconds').humanize(false)
+    // Since moment.js return "a" or "an" for singular values so replacing with 1.
+    return humanizedDuration.replace(/^(a|an) /, '1 ');
+}

src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react'
+import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion'
 import { ClipboardButton, getTTLInHumanReadableFormat } from '@Common/index'
 import { ReactComponent as ICChatSupport } from '@IconsV2/ic-chat-circle-dots.svg'
 import { DevtronLicenseCardProps, ENTERPRISE_SUPPORT_LINK, LicenseStatus } from '@Shared/index'
@@ -6,6 +8,8 @@ import { Icon } from '../Icon'
 import { getLicenseColorsAccordingToStatus } from './utils'
 import './licenseCard.scss'
 
+const DAMPEN_FACTOR = 40
+
 export const DevtronLicenseCard = ({
     enterpriseName,
     licenseKey,
@@ -18,10 +22,59 @@ export const DevtronLicenseCard = ({
     const { bgColor, textColor } = getLicenseColorsAccordingToStatus(licenseStatus)
     const remainingTime = getTTLInHumanReadableFormat(ttl)
     const remainingTimeString = ttl < 0 ? `Expired ${remainingTime} ago` : `${remainingTime} remaining`
+    const isLicenseValid = ttl > 0
+
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    const mouseX = useMotionValue(window.innerWidth)
+    const mouseY = useMotionValue(window.innerHeight)
+
+    const rotateX = useTransform<number, number>(mouseY, (newMouseY) => {
+        if (!cardRef.current) return 0
+        const rect = cardRef.current.getBoundingClientRect()
+        const newRotateX = newMouseY - rect.top - rect.height / 2
+        return -newRotateX / DAMPEN_FACTOR
+    })
+    const rotateY = useTransform(mouseX, (newMouseX) => {
+        if (!cardRef.current) return 0
+        const rect = cardRef.current.getBoundingClientRect()
+        const newRotateY = newMouseX - rect.left - rect.width / 2
+        return newRotateY / DAMPEN_FACTOR
+    })
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            animate(mouseX, e.clientX)
+            animate(mouseY, e.clientY)
+        }
+
+        window.addEventListener('mousemove', handleMouseMove)
+
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove)
+        }
+    }, [])
+
+    const diagonalMovement = useTransform<number, number>([rotateX, rotateY], ([newRotateX, newRotateY]) => {
+        const position: number = newRotateX + newRotateY
+        return position
+    })
+    const sheenPosition = useTransform(diagonalMovement, [-5, 5], [-100, 200])
+
+    const sheenOpacity = useTransform(sheenPosition, [-100, 50, 200], [0, 0.05, 0])
+    const sheenGradient = useMotionTemplate`linear-gradient(
+    55deg,
+    transparent,
+    rgba(255 255 255 / ${sheenOpacity}) ${sheenPosition}%,
+    transparent)`
 
     return (
         <div className="flexbox-col p-8 br-16" style={{ backgroundColor: bgColor }}>
-            <div className="license-card border__secondary-translucent flexbox-col br-12 h-200 bg__tertiary">
+            <motion.div
+                className="license-card border__secondary-translucent flexbox-col br-12 h-200 bg__tertiary"
+                ref={cardRef}
+                style={{ rotateX, rotateY, backgroundImage: sheenGradient }}
+            >
                 <div className="p-20 flexbox-col dc__content-space flex-grow-1">
                     <div className="flexbox dc__align-items-center dc__content-space">
                         <span className="font-merriweather cn-9 fs-16 fw-7 lh-1-5 dc__truncate">{enterpriseName}</span>
@@ -48,7 +101,7 @@ export const DevtronLicenseCard = ({
                         TRIAL LICENSE
                     </span>
                 )}
-            </div>
+            </motion.div>
             {licenseStatus !== LicenseStatus.ACTIVE && (
                 <div className="p-16 flexbox-col dc__gap-8">
                     <div className="flexbox dc__gap-8">
@@ -57,7 +110,11 @@ export const DevtronLicenseCard = ({
                             <a href={`mailto:${ENTERPRISE_SUPPORT_LINK}`}>{ENTERPRISE_SUPPORT_LINK}</a> or contact your
                             Devtron representative.
                         </span>
-                        <Icon name={ttl < 0 ? 'ic-timer' : 'ic-error'} color={ttl < 0 ? 'Y500' : 'R500'} size={16} />
+                        <Icon
+                            name={isLicenseValid ? 'ic-timer' : 'ic-error'}
+                            color={isLicenseValid ? 'Y500' : 'R500'}
+                            size={16}
+                        />
                     </div>
                     {/* TODO: Add onClick, and common out the button */}
                     <Button

src/Shared/Components/LoginBanner/LoginBanner.tsx

@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion'
+import { useEffect, useMemo, useState } from 'react'
 import { Icon } from '../Icon'
-import { TESTIMONIAL_CARD_DATA } from './constants'
+import { TESTIMONIAL_CARD_DATA, TESTIMONIAL_CARD_INTERVAL, TRANSITION_EASE_CURVE } from './constants'
 
 const AnimatedBackground = () => (
     <motion.div>
@@ -96,7 +97,20 @@ const AnimatedBackground = () => (
 )
 
 const LoginBanner = () => {
-    const { quote, name, designation, iconName } = TESTIMONIAL_CARD_DATA
+    const [currentIndex, setCurrentIndex] = useState<number>(0)
+    const testimonialCount = useMemo(() => TESTIMONIAL_CARD_DATA.length, [])
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonialCount)
+        }, TESTIMONIAL_CARD_INTERVAL)
+
+        return () => {
+            clearInterval(interval)
+        }
+    }, [testimonialCount])
+
+    const { quote, name, designation, iconName } = TESTIMONIAL_CARD_DATA[currentIndex]
 
     return (
         <div className="flexbox-col br-12 border__primary dc__position-rel dc__overflow-hidden">
@@ -111,7 +125,22 @@ const LoginBanner = () => {
                     <Icon name="ic-quote" color="N900" />
                     <div className="border__primary w-1 flex-grow-1" />
                 </div>
-                <div className="flexbox-col dc__gap-20">
+                <motion.div
+                    key={currentIndex}
+                    variants={{
+                        hidden: { opacity: 0, x: 200 },
+                        visible: { opacity: 1, x: 0 },
+                    }}
+                    initial="hidden"
+                    animate="visible"
+                    exit="hidden"
+                    transition={{
+                        staggerChildren: 0.3,
+                        opacity: { duration: 0.75, ease: TRANSITION_EASE_CURVE },
+                        x: { duration: 0.85, ease: TRANSITION_EASE_CURVE },
+                    }}
+                    className="flexbox-col dc__gap-20"
+                >
                     <div className="fs-14 fw-4 lh-1-5 cn-9">{quote}</div>
                     <div className="flexbox dc__content-space dc__align-items-center">
                         <div>
@@ -120,7 +149,7 @@ const LoginBanner = () => {
                         </div>
                         <Icon name={iconName} color={null} size={24} />
                     </div>
-                </div>
+                </motion.div>
             </div>
         </div>
     )

src/Shared/Components/LoginBanner/constants.tsx

@@ -1,9 +1,32 @@
 import { TestimonialCardConfig } from './types'
 
 // TODO: add more testimonials (pending on product team)
-export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig = {
-    quote: "Devtron has been instrumental in our transition to Kubernetes. Its platform helped us streamline our CI/CD processes, ensuring consistent and secure deployments. We've seen significantly improved our deployment speed and security posture thanks to Devtron's built-in DevSecOps features.",
-    name: 'Sathish Kumar',
-    designation: 'CloudOps/DevOps Lead at Ather Energy Pvt. Ltd.',
-    iconName: 'ic-devtron', // TODO: add ather icon
-}
+export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig[] = [
+    {
+        quote: "Devtron has been instrumental in our transition to Kubernetes. Its platform helped us streamline our CI/CD processes, ensuring consistent and secure deployments. We've seen significantly improved our deployment speed and security posture thanks to Devtron's built-in DevSecOps features.",
+        name: 'Sathish Kumar',
+        designation: 'CloudOps/DevOps Lead at Ather Energy Pvt. Ltd.',
+        iconName: 'ic-devtron',
+    },
+    {
+        quote: 'One of the best tools in the market. A production-ready platform that helps in automating all the requirements on Kubernetes. The platform is easy to get started with. Well done product! We run a lot of migrations and backup jobs daily, and Devtron makes it super easy and auditable for us.',
+        name: 'Arun Jain',
+        designation: 'Froent developer',
+        iconName: 'ic-devtron',
+    },
+    {
+        quote: "Devtron has been instrumental in our transition to Kubernetes. Its platform helped us streamline our CI/CD processes, ensuring consistent and secure deployments. We've seen significantly improved our deployment speed and security posture thanks to Devtron's built-in DevSecOps features.",
+        name: 'Abhishek',
+        designation: 'CloudOps Lead at Ather Energy Pvt. Ltd.',
+        iconName: 'ic-devtron',
+    },
+    {
+        quote: 'Devtron has changed the way we used to operate, from bunch of scripts to now just a dashboard. The UI is pretty good and fast. Devtron has truly removed the dependencies of our developers from DevOps peeps. The UI is user-friendly and simple for new users to get acquainted with the tool.',
+        name: 'Utkarsh Arya',
+        designation: 'Product Manager',
+        iconName: 'ic-devtron',
+    },
+]
+
+export const TESTIMONIAL_CARD_INTERVAL = 5000 // duration (in ms) for each testimonial card slide animation
+export const TRANSITION_EASE_CURVE = [0.25, 0.8, 0.25, 1]