"use client"
import Image from "next/image"
import { Icon } from "@iconify/react/dist/iconify.js"

const WelcomeCard = () => {
  return (
    <div className="p-6 rounded-2xl bg-lightprimary/40 dark:bg-lightprimary/40 overflow-hidden relative">
      <div className="grid grid-cols-12">
        <div className="lg:col-span-7 md:col-span-7 sm:col-span-12 col-span-12">
          <div className="flex gap-3 items-center mb-9">
            <div className="rounded-full overflow-hidden">
              <Image
                src="/images/profile/user-1.jpg"
                className="h-10 w-10"
                alt="user-image"
                width={40}
                height={40}
              />
            </div>
            <h5 className="text-lg lg:whitespace-nowrap font-semibold">Welcome back Natalia!</h5>
          </div>
          <div className="flex gap-6 items-center">
            <div className="pe-6 rtl:pe-auto rtl:ps-6  border-e border-border border-opacity-20  dark:border-darkborder">
              <h3 className="flex items-start mb-0 text-3xl font-semibold">
                $2,340
                <Icon icon="tabler:arrow-up-right" className='text-base  text-success' />
              </h3>
              <p className="text-sm mt-1">Today’s Sales</p>
            </div>
            <div className="">
              <h3 className="flex items-start mb-0 text-3xl font-semibold">
                35%
                <Icon icon="tabler:arrow-up-right" className='text-base  text-success' />
              </h3>
              <p className="text-sm mt-1">Overall Performance</p>
            </div>
          </div>
        </div>
        <div className="lg:col-span-5 md:col-span-5 sm:col-span-12 col-span-12">
          <div className="sm:absolute relative right-0 rtl:right-auto rtl:left-0 -bottom-8">
            <Image
              src="/images/backgrounds/welcome-bg.svg"
              alt="background-image"
              className="w-full"
              width={271}
              height={165}
            />
          </div>
        </div>
      </div>
    </div>

  )
}

export default WelcomeCard

import React from "react";
import CardBox from "../../../shared/CardBox";
import { Button } from "flowbite-react";
import Image from "next/image";

const DownloaadBannerCode = () => {
  return (
    <>
      <div className="p-6 rounded-2xl bg-lightprimary/40 dark:bg-lightprimary/40 shadow-none pb-0 relative">
        <div className="grid grid-cols-12 gap-6">
          <div className="md:col-span-6 col-span-12">
            <h5 className="text-lg mt-2 font-semibold">Track your every Transaction Easily</h5>
            <p className="text-sm font-medium text-inherit opacity-75 py-5">
              Track and record your every income and expence easily to control your balance
            </p>
            <Button color={'info'}>Download</Button>
          </div>
          <div className="md:col-span-6 col-span-12">
            <Image src="/images/backgrounds/track-bg.png" alt="banner" className="ms-auto" width={168} height={195} />
          </div>
        </div>
      </div>
    </>
  );
};

export default DownloaadBannerCode;

import React from "react";
import CardBox from "../../../shared/CardBox";
import Image from "next/image";
import { Button } from "flowbite-react";
const EmptyBannerCode = () => {
  return (
    <>
      <CardBox>
        <Image src="/images/products/empty-shopping-bag.gif" alt="banner" className="mx-auto w-48" width={192} height={192} />
        <div className="text-center mx-auto">
          <h5 className="text-lg">Oop, Your cart is empty!</h5>
          <p className="text-darklink mt-2">
            Get back to shopping and get rewards from it.
          </p>
          <div className="flex justify-center mt-5">
            <Button color={"primary"}>Go for shopping</Button>
          </div>
        </div>
      </CardBox>
    </>
  );
};

export default EmptyBannerCode;

import React from "react";
import CardBox from "../../../shared/CardBox";
import Image from "next/image";
import { Button } from "flowbite-react";
const ErroreBannerCode = () => {
  return (
    <>
      <CardBox>
        <Image src="/images/backgrounds/website-under-construction.svg" alt="banner" className="mx-auto w-48" width={192} height={192} />
        <div className="text-center mx-auto">
          <h5 className="text-lg">Oops something went wrong!</h5>
          <p className="text-darklink mt-2 md:px-12">
            Trying again to bypasses these temporary error.
          </p>
          <div className="flex justify-center mt-3">
            <Button color={"error"}>Retry</Button>
          </div>
        </div>
      </CardBox>
    </>
  );
};

export default ErroreBannerCode;

import React from "react";
import CardBox from "../../../shared/CardBox";
import Image from "next/image";
import { Button } from "flowbite-react";
const MutualBannerCode = () => {
  return (
    <>
      <CardBox className="mt-[30px] text-center">
        <h5 className="text-lg mb-4">Mutual Friend Revealed</h5>
        <div className="relative w-auto mx-auto">
          <Image
            src="/images/profile/user-3.jpg"
            alt="banner"
            className="mx-auto w-[140px] rounded-full"
            width={140}
            height={140}
          />
          <span className="rounded-full absolute end-3 top-[5px] bg-error text-[10px] h-5 w-5 flex justify-center items-center text-white">
            1
          </span>
        </div>

        <div className="mx-auto mt-4">
          <h5 className="text-lg">Tommoie Henderson</h5>
          <p className="text-darklink mt-2 md:px-12">
            Accept the request and type a message
          </p>
          <div className="flex justify-center gap-3 mt-4">
            <Button color={"primary"}>Accept</Button>
            <Button color={"lighterror"}>Remove</Button>
          </div>
        </div>
      </CardBox>
    </>
  );
};

export default MutualBannerCode;

import React from "react";
import CardBox from "../../../shared/CardBox";
import Image from "next/image";
import { Button } from "flowbite-react";
const NotificationBannerCode = () => {
  return (
    <>
      <CardBox>
        <p className="text-sm text-darklink text-center mb-2">LEVEL UP</p>
        <Image src="/images/backgrounds/gold.png" alt="banner" className="mx-auto w-[150px]" width={150} height={150} />
        <div className="text-center mx-auto mt-3">
          <h5 className="text-lg">You reach all Notifications</h5>
          <p className="text-darklink mt-2 md:px-12">
            Congratulations, Tap to continue next task.
          </p>
          <div className="flex justify-center mt-3">
            <Button color={"primary"}>Yes,Got it!</Button>
          </div>
        </div>
      </CardBox>
    </>
  );
};

export default NotificationBannerCode;

import React from "react";
import CardBox from "../../../shared/CardBox";
import { Button } from "flowbite-react";
import Image from "next/image";

const WelcomeBannerCode = () => {
  return (
    <>
      <CardBox className="bg-primary dark:bg-primary! shadow-none pb-0">
        <div className="grid grid-cols-12 gap-6">
          <div className="md:col-span-6 col-span-12">
            <h5 className="text-lg text-white mt-2">Welcome back David!</h5>
            <p className="text-white opacity-75 text-sm font-medium py-5">
              You have earned 54% more than last month which is great thing.
            </p>
            <Button color={'error'}>Check</Button>
          </div>
          <div className="md:col-span-6 col-span-12">
            <Image src="/images/backgrounds/welcome-bg2.png" alt="banner" className="ms-auto" width={282} height={196} />
          </div>
        </div>
      </CardBox>
    </>
  );
};

export default WelcomeBannerCode;