Collins

app/(landing)/projects/[id]/page.tsx

@@ -67,7 +67,6 @@ async function ProjectContent({ id }: { id: string }) {
 
   try {
     const response = await getCrowdfundingProject(id);
-    console.log(response);
     if (response.success && response.data) {
       projectData = transformCrowdfundingProject(
         response.data.project,

components/EmptyState.tsx

@@ -11,7 +11,7 @@ export interface EmptyStateProps {
   onAddClick?: () => void;
   className?: string;
   type?: 'default' | 'compact' | 'custom';
-  action?: React.ReactNode;
+  action?: React.ReactNode | boolean;
 }
 
 const EmptyState: React.FC<EmptyStateProps> = ({
@@ -21,7 +21,7 @@ const EmptyState: React.FC<EmptyStateProps> = ({
   onAddClick = () => {},
   className = '',
   type = 'default',
-  action,
+  action = false,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const titleRef = useRef<HTMLHeadingElement>(null);

components/Project-Page-Hero.tsx

@@ -3,9 +3,41 @@ import React from 'react';
 import Image from 'next/image';
 import { ArrowDown } from 'lucide-react';
 import { BoundlessButton } from './buttons/BoundlessButton';
-import Link from 'next/link';
 
 export default function ProjectPageHero() {
+  const scrollToProjects = () => {
+    const projectsSection = document.getElementById('explore-project');
+    if (projectsSection) {
+      const targetPosition = projectsSection.offsetTop - 100;
+      const startPosition = window.pageYOffset;
+      const distance = targetPosition - startPosition;
+      const duration = 1000;
+      let start: number | null = null;
+
+      const animation = (currentTime: number) => {
+        if (start === null) start = currentTime;
+        const timeElapsed = currentTime - start;
+        const run = easeInOutQuad(
+          timeElapsed,
+          startPosition,
+          distance,
+          duration
+        );
+        window.scrollTo(0, run);
+        if (timeElapsed < duration) requestAnimationFrame(animation);
+      };
+
+      const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
+        t /= d / 2;
+        if (t < 1) return (c / 2) * t * t + b;
+        t--;
+        return (-c / 2) * (t * (t - 2) - 1) + b;
+      };
+
+      requestAnimationFrame(animation);
+    }
+  };
+
   return (
     <div className='relative min-h-screen overflow-hidden text-white'>
       <div className='pointer-events-none absolute inset-0'>
@@ -43,17 +75,16 @@ export default function ProjectPageHero() {
               Validated by the community. Backed milestone by milestone.
             </p>
 
-            <Link href='#explore-project'>
-              <BoundlessButton
-                size='xl'
-                className='group relative transform rounded-lg bg-[#A7F950] px-6 py-3 text-sm font-semibold text-black transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#A7F950]/25 md:px-7 md:py-3.5 md:text-base lg:px-8 lg:py-4 lg:text-base'
-              >
-                <span className='flex items-center gap-2'>
-                  Start Exploring Projects
-                  <ArrowDown className='h-4 w-4 transition-transform group-hover:translate-y-1 md:h-4 md:w-4 lg:h-5 lg:w-5' />
-                </span>
-              </BoundlessButton>
-            </Link>
+            <BoundlessButton
+              onClick={scrollToProjects}
+              size='xl'
+              className='group relative transform rounded-lg bg-[#A7F950] px-6 py-3 text-sm font-semibold text-black transition-none duration-300 hover:!scale-none hover:shadow-lg hover:shadow-[#A7F950]/25 md:px-7 md:py-3.5 md:text-base lg:px-8 lg:py-4 lg:text-base'
+            >
+              <span className='flex items-center gap-2'>
+                Start Exploring Projects
+                <ArrowDown className='h-4 w-4 transition-transform group-hover:translate-y-1 md:h-4 md:w-4 lg:h-5 lg:w-5' />
+              </span>
+            </BoundlessButton>
           </div>
 
           <div className='relative hidden h-[60vh] md:block lg:h-[70vh]'>

components/landing-page/BackedBy.tsx

@@ -229,12 +229,12 @@ const BackedBy = () => {
         </p>
       </header>
 
-      <div className='mx-auto my-11 grid max-w-[872px] grid-cols-2 items-center justify-center gap-6 md:grid-cols-4'>
+      <div className='mx-auto my-11 grid w-full grid-cols-2 items-center justify-center gap-4 md:max-w-[872px] md:grid-cols-4'>
         {backedBy.map(item => (
           <Link
             href={item.url}
             key={item.name}
-            className='group relative flex items-center justify-center p-4 transition-transform hover:scale-105'
+            className='group w-fullflex relative items-center justify-center transition-transform hover:scale-105'
             target='_blank'
             rel='noopener noreferrer'
             aria-label={`Visit ${item.name} website`}

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

@@ -1,23 +1,34 @@
 import React, { useState } from 'react';
 import Empty from './Empty';
 import Image from 'next/image';
+import { CrowdfundingProject } from '@/lib/api/types';
 
 interface Backer {
   _id: string;
-  profile: {
-    firstName: string;
-    lastName: string;
-    username: string;
-    bio: string;
+  user: {
+    _id: string;
+    email: string;
+    profile: {
+      firstName: string;
+      lastName: string;
+      username: string;
+      avatar?: string;
+    };
   };
-  avatar: string;
   amount: number;
-  isAnonymous: boolean;
+  date: string;
+  transactionHash: string;
 }
 
-const ProjectBackers = () => {
-  const [backers] = useState<Backer[]>([]);
-  const handleBackerClick = () => {};
+const ProjectBackers = ({ project }: { project: CrowdfundingProject }) => {
+  const [backers] = useState<Backer[]>(
+    project.funding.contributors as Backer[]
+  );
+
+  const handleBackerClick = (backer: Backer) => {
+    window.open(`/profile/${backer.user.profile.username}`, '_blank');
+  };
+
   if (backers.length === 0) {
     return <Empty />;
   }
@@ -27,17 +38,18 @@ const ProjectBackers = () => {
         <div
           key={backer._id}
           className='flex cursor-pointer items-center justify-between rounded px-3 py-2 transition-colors hover:bg-gray-900/30'
-          onClick={() => handleBackerClick()}
+          onClick={() => handleBackerClick(backer)}
         >
           <div className='flex items-center space-x-4'>
+            {/* Avatar */}
             <div className='relative'>
               <div className='h-12 w-12 overflow-hidden rounded-full border-[0.5px] border-[#2B2B2B]'>
-                {backer.avatar ? (
+                {backer.user.profile.avatar ? (
                   <Image
                     width={48}
                     height={48}
-                    src={backer.avatar}
-                    alt={backer.profile.firstName}
+                    src={backer.user.profile.avatar}
+                    alt={backer.user.profile.firstName}
                     className='h-full w-full object-cover'
                   />
                 ) : (
@@ -52,16 +64,10 @@ const ProjectBackers = () => {
               </div>
             </div>
 
+            {/* Backer Info */}
             <div className='flex flex-col space-y-0.5'>
               <span className='text-base font-normal text-white'>
-                {backer.isAnonymous
-                  ? 'Anonymous'
-                  : `${backer.profile.firstName} ${backer.profile.lastName}`}{' '}
-                {!backer.isAnonymous && (
-                  <span className='text-xs font-bold'>
-                    @{backer.profile.username}
-                  </span>
-                )}
+                {backer.user.profile.firstName} {backer.user.profile.lastName}
               </span>
               <span className={`truncate text-sm text-gray-500`}>
                 ${backer.amount}

components/project-details/project-layout.tsx

@@ -340,10 +340,10 @@ export function ProjectLayout({ project, crowdfund }: ProjectLayoutProps) {
                   <ProjectMilestone projectId={project._id} project={project} />
                 </TabsContent>
                 <TabsContent value='voters' className='mt-0'>
-                  <ProjectVoters />
+                  <ProjectVoters project={project} />
                 </TabsContent>
                 <TabsContent value='backers' className='mt-0'>
-                  <ProjectBackers />
+                  <ProjectBackers project={project} />
                 </TabsContent>
                 <TabsContent value='comments' className='mt-0'>
                   <ProjectComments projectId={project._id} />

components/project-details/project-sidebar/ProjectSidebarHeader.tsx

@@ -10,7 +10,7 @@ export function ProjectSidebarHeader({
 }: ProjectSidebarHeaderProps) {
   const getStatusStyles = () => {
     switch (projectStatus) {
-      case 'Funding':
+      case 'campaigning':
         return 'bg-secondary-75 border-secondary-600 text-secondary-600';
       case 'Funded':
         return 'bg-[rgba(167,249,80,0.08)] border-primary text-primary';

components/project-details/project-sidebar/types.ts

@@ -69,7 +69,7 @@ export interface ProjectSidebarLinksProps {
 }
 
 export type ProjectStatus =
-  | 'Funding'
+  | 'campaigning'
   | 'Funded'
   | 'Completed'
   | 'Validation'

components/project-details/project-sidebar/utils.ts

@@ -13,8 +13,8 @@ export function getProjectStatus(
   if (project.funding?.raised >= project.funding?.goal) {
     return 'Funded';
   }
-  if (project.status === 'idea' && !crowdfund?.isVotingActive) {
-    return 'Funding';
+  if (project.status === 'campaigning' && !crowdfund?.isVotingActive) {
+    return 'campaigning';
   }
   return project.status as ProjectStatus;
 }