blur-vignette-card

1import { BlurVignette, BlurVignetteArticle } from '@/components/ui/blur-vignette';
2import { cn } from '@/lib/utils';
3import Image from 'next/image';
4import React from 'react';
5 
6function Blurvignettecard() {
7  return (
8    <>
9      <div className='w-fit mx-auto sm:flex gap-2 justify-center md:p-8 sm:p-4'>
10        <BlurVignette radius='15px' inset='100px' transitionLength='200px' blur='15px'>
11          <Image
12            src='https://img.freepik.com/free-photo/cartoon-superhero-illustration_23-2151732547.jpg'
13            alt='grid'
14            width={600}
15            className='mx-auto w-full relative h-full object-cover'
16            height={600}
17          />
18          <BlurVignetteArticle classname='h-[35%] w-[96%] ml-2 mt-auto mb-1 border border-neutral-900/20 rounded-xl text-white '>
19            <article className=' py-5 px-3'>
20              <h1 className='2xl:text-3xl text-2xl'>UiLayout</h1>
21              <p className='2xl:text-sm text-xs'>
22                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis, quaerat ab? Rerum
23                facilis dignissimos voluptatum!
24              </p>
25            </article>
26          </BlurVignetteArticle>
27        </BlurVignette>
28        <BlurVignette radius='15px' inset='100px' transitionLength='200px' blur='15px'>
29          <Image
30            src='https://img.freepik.com/free-photo/halloween-scene-illustration-anime-style_23-2151794328.jpg'
31            alt='grid'
32            width={600}
33            className='mx-auto w-full relative h-full object-cover'
34            height={600}
35          />
36          <BlurVignetteArticle classname='h-[35%] w-[96%] ml-2 mt-auto mb-1 border border-neutral-900/20 text-white '>
37            <article className=' py-5 px-3'>
38              <h1 className='2xl:text-3xl text-2xl'>UiLayout</h1>
39              <p className='2xl:text-sm text-xs'>
40                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis, quaerat ab? Rerum
41                facilis dignissimos voluptatum!
42              </p>
43            </article>
44          </BlurVignetteArticle>
45        </BlurVignette>
46      </div>
47    </>
48  );
49}
50 
51export default Blurvignettecard;