card-globe-white

1import Earth from '@/components/ui/globe';
2import React from 'react';
3 
4function CardGlobeWhite() {
5  return (
6    <>
7      <div className='min-h-screen overflow-hidden bg-white text-white'>
8        <article className='max-w-[500px] overflow-hidden mx-auto mt-6 p-5 text-center   border rounded-lg relative h-[500px]'>
9          <div className='absolute top-0 left-0 z-[1] h-full w-full  bg-[radial-gradient(#83838352_1px,#ececec_1px)] bg-[size:20px_20px]'></div>
10          <div className='relative z-10 pt-4 h-full'>
11            <h1 className='sm:text-7xl text-5xl font-semibold bg-gradient-to-b from-[#202020] to-[#9c9c9c] bg-clip-text text-transparent leading-[100%] tracking-tighter'>
12              DESIGN A MASTERPIECE
13            </h1>
14            <Earth
15              mapBrightness={6}
16              dark={0}
17              baseColor={[1, 1, 1]}
18              glowColor={[1, 1, 1]}
19              className='sm:max-w-[800px] max-w-[1000px] absolute sm:bottom-auto -bottom-20 translate-y-4 sm:-right-20 -right-0 sm:h-[450px] h-[550px]'
20            />
21          </div>
22        </article>
23      </div>
24    </>
25  );
26}
27 
28export default CardGlobeWhite;