feat(components): Implement dynamic ProjectCard with conditional UI

app/(landing)/projects/page.tsx

@@ -7,7 +7,10 @@ export const metadata: Metadata = generatePageMetadata('projects');
 const ProjectsPage = () => {
   return (
     <div className='text-white text-4xl font-bold text-center mt-10'>
-      Projects Page
+      <h1 className='mb-10'>Projects</h1>
+      <div className='flex flex-wrap gap-8 justify-center'>
+        {/* Project cards will be rendered here */}
+      </div>
     </div>
   );
 };

app/globals.css

@@ -1,6 +1,6 @@
 @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 *));
 
 /* Custom scrollbar styles for comment modal */
@@ -70,6 +70,15 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --color-office-brown: var(--office-brown);
+  --color-office-brown-darker: var(--office-brown-darker);
+  --color-warning-orange: var(--warning-orange);
+  --color-warning-orange-darker: var(--warning-orange-darker);
+  --color-blue-ish: var(--blue-ish);
+  --color-blue-ish-darker: var(--blue-ish-darker);
+  --color-success-green: var(--success-green);
+  --color-success-green-darker: var(--success-green-darker);
+  --color-error-status: var(--error-status);
 
   /* Custom breakpoints for 4K screens */
   --breakpoint-4xl: 2560px;
@@ -113,6 +122,15 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --office-brown: #e4dbdb;
+  --office-brown-darker: #645d5d;
+  --warning-orange: #fbe2b7;
+  --warning-orange-darker: #ad6f07;
+  --blue-ish: #c6ddf7;
+  --blue-ish-darker: #034592;
+  --success-green: #b5e3c4;
+  --success-green-darker: #04802e;
+  --error-status: #034592;
 }
 
 .dark {
@@ -147,6 +165,15 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  --office-brown: #645d5d;
+  --office-brown-darker: #e4dbdb;
+  --warning-orange: #ad6f07;
+  --warning-orange-darker: #fbe2b7;
+  --blue-ish: #034592;
+  --blue-ish-darker: #c6ddf7;
+  --success-green: #04802e;
+  --success-green-darker: #b5e3c4;
+  --error-status: #034592;
 }
 
 @layer base {
@@ -196,7 +223,9 @@ input[type='number'] {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-
+.font-inter {
+  font-family: 'Inter', sans-serif;
+}
 /* Dropdown menu item animations */
 @keyframes dropdownItemSlideIn {
   from {

components/landing-page/project/ProjectCard.tsx

@@ -0,0 +1,170 @@
+import { Progress } from '@/components/ui/progress';
+import { formatNumber } from '@/lib/utils';
+
+type ProjectCardProps = {
+  creatorName: string;
+  creatorLogo: string;
+  projectImage: string;
+  projectTitle: string;
+  projectDescription: string;
+  status: 'Validation' | 'Funding' | 'Funded' | 'Completed';
+  deadlineInDays: number;
+  milestoneRejected?: boolean;
+  votes?: {
+    current: number;
+    goal: number;
+  };
+  funding?: {
+    current: number;
+    goal: number;
+    currency: string;
+  };
+  milestones?: {
+    current: number;
+    goal: number;
+  };
+};
+function ProjectCard({
+  creatorName,
+  creatorLogo,
+  projectImage,
+  projectTitle,
+  projectDescription,
+  status,
+  deadlineInDays,
+  milestoneRejected,
+  votes,
+  funding,
+  milestones,
+}: ProjectCardProps) {
+  const getStatusStyles = () => {
+    switch (status) {
+      case 'Funding':
+        return 'bg-blue-ish border-blue-ish-darker text-blue-ish-darker';
+      case 'Funded':
+        return 'bg-transparent border-primary text-primary';
+      case 'Completed':
+        return 'bg-success-green border-success-green-darker text-success-green-darker';
+      case 'Validation':
+        return 'bg-warning-orange border-warning-orange-darker text-warning-orange-darker';
+      default:
+        return '';
+    }
+  };
+
+  const getDeadlineInfo = () => {
+    if (status === 'Completed' && milestoneRejected) {
+      return {
+        text: '1 Milestone Rejected',
+        className: 'text-red-500',
+      };
+    }
+
+    if (deadlineInDays <= 3) {
+      return {
+        text: `${deadlineInDays} days to deadline`,
+        className: 'text-error-status',
+      };
+    }
+
+    if (deadlineInDays <= 15) {
+      return {
+        text: `${deadlineInDays} days to deadline`,
+        className: 'text-warning-orange-darker',
+      };
+    }
+
+    return {
+      text: `${deadlineInDays} days to deadline`,
+      className: 'text-success-green-darker',
+    };
+  };
+
+  const deadlineInfo = getDeadlineInfo();
+
+  return (
+    <main className='w-[397px] flex flex-col gap-4 p-5 rounded-[8px] bg-[#030303] border border-gray-900 font-inter hover:bg-primary/5 hover:border-primary/25 cursor-pointer'>
+      <header className='flex items-center justify-between'>
+        <main className='flex items-center gap-2'>
+          <div
+            style={{ backgroundImage: `url(${creatorLogo})` }}
+            className='size-6 rounded-full bg-white bg-cover bg-center'
+          ></div>
+          <h4 className='font-normal text-sm text-gray-500'>{creatorName}</h4>
+        </main>
+        <main className='flex items-center gap-3'>
+          <div className='w-[63px]  px-1 py-0.5 rounded-[4px] bg-office-brown border border-office-brown-darker text-office-brown-darker font-semibold text-xs flex items-center justify-center '>
+            Category
+          </div>
+          <div
+            className={`px-1 py-0.5 rounded-[4px] ${getStatusStyles()} border font-semibold text-xs flex items-center justify-center `}
+          >
+            {status}
+          </div>
+        </main>
+      </header>
+      <article className='flex items-center gap-5'>
+        <main
+          style={{ backgroundImage: `url(${projectImage})` }}
+          className='bg-white w-[79.41px] h-[90px] rounded-[8px] bg-cover bg-center'
+        ></main>
+        <main className='flex flex-col gap-2 w-[257px]'>
+          <h2 className='font-semibold text-base text-white text-left'>
+            {projectTitle}
+          </h2>
+          <div className='relative h-[60px] group'>
+            <p className='font-normal text-sm text-white text-left line-clamp-3 cursor-pointer group-hover:absolute group-hover:z-10 group-hover:bg-[#030303] group-hover:rounded-md group-hover:line-clamp-none group-hover:w-full'>
+              {projectDescription}
+            </p>
+          </div>
+        </main>
+      </article>
+      <footer className='flex flex-col gap-2'>
+        <main className='flex items-center justify-between'>
+          {status === 'Validation' && votes && (
+            <h3 className='font-medium text-sm text-[#f5f5f5]'>
+              {formatNumber(votes.current)}/{formatNumber(votes.goal)}{' '}
+              <span className='text-gray-500'>Votes</span>
+            </h3>
+          )}
+          {status === 'Funding' && funding && (
+            <h3 className='font-medium text-sm text-[#f5f5f5]'>
+              {formatNumber(funding.current)}/{formatNumber(funding.goal)}{' '}
+              <span className='text-gray-500'>{funding.currency} raised</span>
+            </h3>
+          )}
+          {(status === 'Funded' || status === 'Completed') && milestones && (
+            <h3 className='font-medium text-sm text-[#f5f5f5]'>
+              {milestones.current}/{milestones.goal}{' '}
+              <span className='text-gray-500'>Milestones Submitted</span>
+            </h3>
+          )}
+
+          <h3 className={`font-medium text-sm ${deadlineInfo.className}`}>
+            {deadlineInfo.text}
+          </h3>
+        </main>
+        <div>
+          <Progress
+            value={
+              status === 'Validation'
+                ? votes
+                  ? (votes.current / votes.goal) * 100
+                  : 0
+                : status === 'Funding'
+                  ? funding
+                    ? (funding.current / funding.goal) * 100
+                    : 0
+                  : milestones
+                    ? (milestones.current / milestones.goal) * 100
+                    : 0
+            }
+            className='w-[357px] h-2 rounded-full'
+          />
+        </div>
+      </footer>
+    </main>
+  );
+}
+
+export default ProjectCard;

components/ui/progress.tsx

@@ -21,8 +21,12 @@ function Progress({
     >
       <ProgressPrimitive.Indicator
         data-slot='progress-indicator'
-        className='bg-primary h-full w-full flex-1 transition-all'
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        className='h-full w-full flex-1 transition-all rounded-full'
+        style={{
+          transform: `translateX(-${100 - (value || 0)}%)`,
+          backgroundImage:
+            'linear-gradient(to right, rgba(167, 249, 80, 0.5) 0%, rgba(167, 249, 80, 0.6) 20%, rgba(167, 249, 80, 0.7) 40%, rgba(167, 249, 80, 0.8) 60%, rgba(167, 249, 80, 0.9) 80%, rgba(167, 249, 80, 1) 100%)',
+        }}
       />
     </ProgressPrimitive.Root>
   );

lib/utils.ts

@@ -95,3 +95,13 @@ export const maskEmail = (email: string) => {
 export const generateCampaignLink = async (projectId: string) => {
   return `${process.env.NEXT_PUBLIC_APP_URL}/project/${projectId}`;
 };
+
+export const formatNumber = (num: number): string => {
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
+  }
+  return num.toString();
+};