feat: add lottie file

Author: 0xdevcollins

app/globals.css

@@ -1,6 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 @import 'tailwindcss';
 @import 'tw-animate-css';
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 @custom-variant dark (&:is(.dark *));
 
 @theme {

app/not-found.tsx

@@ -1,20 +1,15 @@
 import React from 'react';
-import Image from 'next/image';
 import { ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import LottieAnimation from '@/components/LottieAnimation';
 
 const NotFound = () => {
   return (
     <div className='flex min-h-[80vh] items-center justify-center bg-[#030303]'>
       <div className='mx-auto max-w-md px-6 text-center'>
         <div className='mb-8 flex flex-col items-center justify-center'>
-          <Image
-            src='/empty-state.png'
-            alt='Empty state illustration'
-            width={240}
-            height={260}
-            className='rounded-lg'
-          />
+          <LottieAnimation />
+
           <h1 className='mb-4 text-4xl font-bold text-white md:text-6xl'>
             404
           </h1>

components/EmptyState.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Plus } from 'lucide-react';
-import Image from 'next/image';
+import LottieAnimation from './LottieAnimation';
 
 export interface EmptyStateProps {
   title?: string;
@@ -63,13 +63,7 @@ const EmptyState: React.FC<EmptyStateProps> = ({
     >
       {/* Illustration */}
       <div className='relative mb-8'>
-        <Image
-          src='/empty-state.png'
-          alt='Empty state illustration'
-          width={240}
-          height={260}
-          className='rounded-lg'
-        />
+        <LottieAnimation />
       </div>
 
       {/* Title */}

components/LottieAnimation.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React from 'react';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+
+interface LottieAnimationProps {
+  src?: string;
+  loop?: boolean;
+  autoplay?: boolean;
+  className?: string;
+  width?: number | string;
+  height?: number | string;
+}
+
+const LottieAnimation: React.FC<LottieAnimationProps> = ({
+  src = 'https://lottie.host/086e1916-d90c-4ef5-9ba8-93051fed0bd8/UjMFDTl4mh.lottie',
+  loop = true,
+  autoplay = true,
+  className = '',
+  width,
+  height,
+}) => {
+  return (
+    <div className={className} style={{ width, height }}>
+      <DotLottieReact src={src} loop={loop} autoplay={autoplay} />
+    </div>
+  );
+};
+
+export default LottieAnimation;

components/project-details/comment-section/comments-empty-state.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import Image from 'next/image';
 import { CommentInput } from './comment-input';
+import LottieAnimation from '@/components/LottieAnimation';
 
 interface CommentsEmptyStateProps {
   onAddComment: (content: string) => void;
@@ -12,13 +12,7 @@ export function CommentsEmptyState({ onAddComment }: CommentsEmptyStateProps) {
     <div className='flex w-full flex-col'>
       <div className='flex flex-col items-center justify-center px-4 py-16 md:py-20'>
         <div className='relative mb-8 h-48 w-48 md:h-56 md:w-56'>
-          <Image
-            src='/Humanoid.png'
-            alt='No comments yet'
-            fill
-            className='object-contain'
-            priority
-          />
+          <LottieAnimation />
         </div>
         <h3 className='mb-8 text-center text-base font-medium text-white md:text-lg'>
           Be the first to Leave a Comment

components/project-details/project-backers/Empty.tsx

@@ -1,18 +1,13 @@
 import React from 'react';
-import Image from 'next/image';
 import { BoundlessButton } from '@/components/buttons/BoundlessButton';
 import { HandHeart } from 'lucide-react';
+import LottieAnimation from '@/components/LottieAnimation';
 
 const Empty = () => {
   return (
     <div className='mx-auto w-full max-w-[400px] space-y-5 py-5 text-center'>
-      <Image
-        src='/Humanoid.svg'
-        alt='Empty state illustration'
-        width={400}
-        height={400}
-        className='h-[400px] w-[400px] rounded-lg'
-      />
+      <LottieAnimation />
+
       <div className='space-y-1'>
         <h3 className='text-center text-base font-medium text-white md:text-lg'>
           Be the first to back this project!

components/project-details/project-layout.tsx

@@ -344,7 +344,7 @@ export function ProjectLayout({ project }: ProjectLayoutProps) {
           </div>
         </div>
       </div>
-      <FundProject open={true} setOpen={() => {}} />
+      <FundProject open={false} setOpen={() => {}} />
     </div>
   );
 }

components/project-details/project-voters/Empty.tsx

@@ -1,18 +1,12 @@
 import React from 'react';
-import Image from 'next/image';
 import { BoundlessButton } from '@/components/buttons/BoundlessButton';
 import { ArrowUpIcon } from 'lucide-react';
+import LottieAnimation from '@/components/LottieAnimation';
 
 const Empty = () => {
   return (
     <div className='mx-auto w-full max-w-[400px] space-y-5 py-5 text-center'>
-      <Image
-        src='/Humanoid.svg'
-        alt='Empty state illustration'
-        width={400}
-        height={400}
-        className='h-[400px] w-[400px] rounded-lg'
-      />
+      <LottieAnimation />
       <div className='space-y-1'>
         <h3 className='text-center text-base font-medium text-white md:text-lg'>
           Cast the First Vote!

next.config.ts

@@ -30,6 +30,10 @@ const nextConfig: NextConfig = {
         protocol: 'https',
         hostname: 'res.cloudinary.com',
       },
+      {
+        protocol: 'https',
+        hostname: 'lottie.host',
+      },
     ],
   },
 };