blur-vignette-img

1import { BlurVignette, BlurVignetteArticle } from '@/components/ui/blur-vignette';
2import { cn } from '@/lib/utils';
3import Image from 'next/image';
4import React from 'react';
5 
6function Blurvignetteimg() {
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='24px' inset='10px' transitionLength='80px' blur='15px'>
11          <Image
12            src='https://img.freepik.com/free-photo/african-kid-enjoying-life_23-2151447718.jpg'
13            alt='grid'
14            width={600}
15            className='mx-auto w-full relative h-full object-cover'
16            height={600}
17          />
18          <BlurVignetteArticle />
19        </BlurVignette>
20        <BlurVignette radius='24px' inset='10px' transitionLength='80px' blur='15px'>
21          <Image
22            src='https://img.freepik.com/free-photo/portrait-middle-aged-man-taking-photos-with-device-world-photography-day_23-2151672359.jpg'
23            alt='grid'
24            width={600}
25            className='mx-auto w-full relative h-full object-cover'
26            height={600}
27          />
28          <BlurVignetteArticle />
29        </BlurVignette>
30      </div>
31    </>
32  );
33}
34 
35export default Blurvignetteimg;