style: onboarding screen cards (#800)

apps/app/components/onboarding/onboarding-card.tsx

@@ -10,15 +10,20 @@ interface IOnboardingCard {
 
 type Props = {
   data: IOnboardingCard;
+  gradient?: boolean;
 };
 
-export const OnboardingCard: React.FC<Props> = ({ data }) => (
-  <>
+export const OnboardingCard: React.FC<Props> = ({ data, gradient = false }) => (
+  <div
+    className={`flex flex-col items-center justify-center gap-7 rounded-[10px]  px-14 pt-10  text-center ${
+      gradient ? "bg-gradient-to-b from-[#2C8DFF]/50 to-transparent via-white" : "bg-white"
+    }`}
+  >
     <div className="h-44 w-full">
       <Image src={data.imgURL} height="180" width="450" alt={data.title} />
     </div>
     <h3 className="text-3xl font-medium">{data.title}</h3>
     <p className="text-base text-gray-400">{data.description}</p>
     <span className="text-base text-gray-400">{data.step}</span>
-  </>
+  </div>
 );

apps/app/pages/onboarding.tsx

@@ -55,15 +55,15 @@ const Onboarding: NextPage = () => {
             </div>
           ) : (
             <div className="flex w-full max-w-2xl flex-col gap-12">
-              <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-white px-14 py-10 text-center shadow-md">
+              <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-white pb-10 text-center shadow-md">
                 {step === 4 ? (
                   <OnboardingCard data={ONBOARDING_CARDS.welcome} />
                 ) : step === 5 ? (
-                  <OnboardingCard data={ONBOARDING_CARDS.issue} />
+                  <OnboardingCard data={ONBOARDING_CARDS.issue} gradient />
                 ) : step === 6 ? (
-                  <OnboardingCard data={ONBOARDING_CARDS.cycle} />
+                  <OnboardingCard data={ONBOARDING_CARDS.cycle} gradient/>
                 ) : step === 7 ? (
-                  <OnboardingCard data={ONBOARDING_CARDS.module} />
+                  <OnboardingCard data={ONBOARDING_CARDS.module} gradient/>
                 ) : (
                   <OnboardingCard data={ONBOARDING_CARDS.commandMenu} />
                 )}