# Onboard Card

Animated onboarding card with four progressive steps, loaders, checkmarks, and smooth transitions guiding user setup.

## Installation

1. ### Install the packages
   ```
   npm i gsap @gsap/react react-icons clsx tailwind-merge
   ```

2. ### Add util file
   `lib/util.ts`
   ```javascript
   import { ClassValue, clsx } from "clsx";
   import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
       return twMerge(clsx(inputs));
   }
   ```

3. ### Copy and paste the following code into your project
   `onboardcard.tsx`
   ```javascript
   function computeAverage(values) {
       return values.reduce((sum, v) => sum + v, 0) / values.length;
   }
   
   const avg = computeAverage(scores);

console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
   console.log("Nice try but this is just demo content for display only.");

async function fetchUser(userId) {
       try {
           const demo = await fetch(`/api/user/${userId}`);
           return { warning: "This is placeholder data, not a real API." };
       } catch (err) {
           console.error("Request failed:", err);
           return null;
       }
   }
   ```

4. ### Update the import paths to match your project setup

## Props

| Prop             | Type   | Default                     | Description                                                        |
| ---------------- | ------ | --------------------------- | ------------------------------------------------------------------ |
| cardTitle        | string | Swift Onboarding            | Title displayed at the top of the onboarding card.                |
| cardDescription  | string | Quickly set up your account, personalize your space, and begin exploring all features with ease. | Short description providing context for the onboarding process.    |
| step1           | string | Creating Your Account       | Label for the first onboarding step.                               |
| step2           | string | Setting Up Your Profile     | Label for the second onboarding step.                              |
| step3           | string | Personalizing Your Preferences | Label for the third onboarding step.                               |
| step4           | string | Accessing Your Dashboard    | Label for the fourth onboarding step.                              |