Gravity

import { Gravity } from '@/components/ui/gravity';

<div className='flex items-center justify-center px-4 py-12'>
  <div className='relative w-full max-w-sm'>
    <div
      className='relative flex h-85 w-[90%] flex-col items-start justify-end 
      overflow-hidden rounded-2xl border border-gray-300 dark:border-gray-800 
      bg-gray-50 dark:bg-[#0a0a0a] 
      px-5 py-8 shadow-xl mx-auto transition-colors'
    >
      <h2 className='relative z-50 mb-3 text-xl font-bold text-gray-900 dark:text-white'>
        Gravity
      </h2>
      <p className='relative z-50 mb-5 text-base font-normal text-gray-600 dark:text-gray-400 leading-relaxed'>
        Gravity pulls everything down, not to defeat it, but to give every fall
        the chance to launch again with greater force.
      </p>
      <Gravity number={20} />
    </div>
  </div>
</div>