binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: onboarding screen cards (#800)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2023-04-12 19:01:46 +05:30 • committed by GitHub
parent 34ff8fecc5
commit 9196fb4562
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 116 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

11
apps/app/components/onboarding/onboarding-card.tsx
View file

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