blur-vignette-card

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='15px'
15          inset='100px'
16          transitionLength='200px'
17          blur='15px'
18        >
19          <Image
20            src='https://img.freepik.com/free-photo/cartoon-superhero-illustration_23-2151732547.jpg'
21            alt='grid'
22            width={600}
23            className='mx-auto w-full relative h-full object-cover'
24            height={600}
25          />
26          <BlurVignetteArticle classname='h-[35%] w-[96%] ml-2 mt-auto mb-1 border border-gray-900/20 rounded-xl text-white '>
27            <article className=' py-5 px-3'>
28              <h1 className='2xl:text-3xl text-2xl'>UiLayout</h1>
29              <p className='2xl:text-sm text-xs'>
30                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
31                Debitis, quaerat ab? Rerum facilis dignissimos voluptatum!
32              </p>
33            </article>
34          </BlurVignetteArticle>
35        </BlurVignette>
36        <BlurVignette
37          radius='15px'
38          inset='100px'
39          transitionLength='200px'
40          blur='15px'
41        >
42          <Image
43            src='https://img.freepik.com/free-photo/halloween-scene-illustration-anime-style_23-2151794328.jpg'
44            alt='grid'
45            width={600}
46            className='mx-auto w-full relative h-full object-cover'
47            height={600}
48          />
49          <BlurVignetteArticle classname='h-[35%] w-[96%] ml-2 mt-auto mb-1 border border-gray-900/20 text-white '>
50            <article className=' py-5 px-3'>
51              <h1 className='2xl:text-3xl text-2xl'>UiLayout</h1>
52              <p className='2xl:text-sm text-xs'>
53                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
54                Debitis, quaerat ab? Rerum facilis dignissimos voluptatum!
55              </p>
56            </article>
57          </BlurVignetteArticle>
58        </BlurVignette>
59      </div>
60    </>
61  );
62}
63
64export default index;