Genie Modal

import Image from 'next/image';
import { ModalGenieEffect } from '@/components/atomixui/genie-modal';

export default function GenieModalDemo() {
    return (
        <ModalGenieEffect>
            <div className="grid grid-cols-2 select-none">
                <div className="flex flex-col gap-2 relative justify-center">
                    <div className="font-deprature text-sm font-medium text-white absolute flex items-center gap-1 top-0 left-0">
                        <span>Ship Fast</span>
                        <div className="border border-neutral-400/50 px-1 rounded">
                            <span className="text-xs">25</span>
                        </div>
                    </div>
                    <div className="flex flex-col text-white font-semibold text-xl font-deprature">
                        <span>Vercel Fast:</span>
                        <span>Accelerate AI to prod</span>
                    </div>
                    <div className="w-full text-white">
                        <span className="font-deprature text-left">OPM, Vercel</span>
                    </div>
                </div>
                <div className="flex items-center justify-between">
                    <div className="p-1 border border-neutral-400/30">
                        <Image
                            alt="cap"
                            width={150}
                            height={150}
                            src="/images/design.jpg"
                            className="size-52 object-cover select-none object-center grayscale-100 hover:grayscale-0 transition-all ease-out duration-200"
                        />
                    </div>
                </div>
            </div>
        </ModalGenieEffect>
    );
}