blur-vignette-img

1import { cn } from '@/lib/utils';
2import Image from 'next/image';
3import React from 'react';
4import {
5  BlurVignette,
6  BlurVignetteArticle,
7} from '@/components/ui/blur-vignette';
8
9function index() {
10  return (
11    <>
12      <div className='w-fit mx-auto sm:flex gap-2 justify-center md:p-8 sm:p-4'>
13        <BlurVignette
14          radius='24px'
15          inset='10px'
16          transitionLength='80px'
17          blur='15px'
18        >
19          <Image
20            src='https://img.freepik.com/free-photo/african-kid-enjoying-life_23-2151447718.jpg'
21            alt='grid'
22            width={600}
23            className='mx-auto w-full relative h-full object-cover'
24            height={600}
25          />
26          <BlurVignetteArticle />
27        </BlurVignette>
28        <BlurVignette
29          radius='24px'
30          inset='10px'
31          transitionLength='80px'
32          blur='15px'
33        >
34          <Image
35            src='https://img.freepik.com/free-photo/portrait-middle-aged-man-taking-photos-with-device-world-photography-day_23-2151672359.jpg'
36            alt='grid'
37            width={600}
38            className='mx-auto w-full relative h-full object-cover'
39            height={600}
40          />
41          <BlurVignetteArticle />
42        </BlurVignette>
43      </div>
44    </>
45  );
46}
47
48export default index;