feat: enhance project details with milestone tracking and comments

- Added a new Milestone component to display project milestones.
- Implemented a timeline feature for visual representation of milestones.
- Introduced new components for milestone details, links, and overview.
- Enhanced project layout to include milestone and voter sections.
- Updated comment system to support real-time updates and improved error handling.
- Added empty states for backers and voters to enhance user experience.
- Improved responsiveness and styling across various components.

This update significantly enhances the project details page, providing users with a comprehensive view of milestones and comments.

Author: 0xdevcollins

app/(landing)/blog/page.tsx

@@ -59,10 +59,12 @@ function BlogGridLoading() {
 const BlogPage = async () => {
   return (
     <div className='min-h-screen bg-[#030303]'>
-      <BlogHero />
-      <Suspense fallback={<BlogGridLoading />}>
-        <StreamingBlogGridWrapper />
-      </Suspense>
+      <div className='mx-auto max-w-[1440px] px-5 py-5 md:px-[50px] lg:px-[100px]'>
+        <BlogHero />
+        <Suspense fallback={<BlogGridLoading />}>
+          <StreamingBlogGridWrapper />
+        </Suspense>
+      </div>
       <TestimonialSection testimonials={testimonials} />
     </div>
   );

app/(landing)/code-of-conduct/page.tsx

@@ -6,7 +6,7 @@ export const metadata: Metadata = generatePageMetadata('codeOfConduct');
 
 const CodeOfConductPage = () => {
   return (
-    <div className='mt-10 text-center text-4xl font-bold text-white'>
+    <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'>
       Code of Conduct Page
     </div>
   );

app/(landing)/contact/page.tsx

@@ -6,7 +6,7 @@ export const metadata: Metadata = generatePageMetadata('contact');
 
 const ContactPage = () => {
   return (
-    <div className='mt-10 text-center text-4xl font-bold text-white'>
+    <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'>
       Contact Page
     </div>
   );

app/(landing)/grants/page.tsx

@@ -6,7 +6,7 @@ export const metadata: Metadata = generatePageMetadata('grants');
 
 const GrantPage = () => {
   return (
-    <div className='mt-10 text-center text-4xl font-bold text-white'>
+    <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'>
       Grant Page
     </div>
   );

app/(landing)/hackathons/page.tsx

@@ -6,7 +6,7 @@ export const metadata: Metadata = generatePageMetadata('hackathons');
 
 const HackathonsPage = () => {
   return (
-    <div className='mt-10 text-center text-4xl font-bold text-white'>
+    <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'>
       Hackathons Page
     </div>
   );

app/(landing)/me/layout.tsx

@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 
 export default function MeLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className='min-h-screen flex-1 px-6 py-5 md:px-10 md:py-20 xl:px-[100px]'>
+    <div className='mx-auto min-h-screen max-w-[1440px] flex-1 px-5 py-5 md:px-[50px] lg:px-[100px]'>
       {children}
     </div>
   );

app/(landing)/page.tsx

@@ -11,7 +11,7 @@ export default function LandingPage() {
   return (
     <div className='relative overflow-hidden'>
       <BeamBackground />
-      <div className='relative z-10 mx-auto max-w-[1300px] space-y-[60px] md:space-y-[80px]'>
+      <div className='relative z-10 mx-auto max-w-[1440px] space-y-[60px] px-5 py-5 md:space-y-[80px] md:px-[50px] lg:px-[100px]'>
         <Hero />
         <Explore />
         <WhyBoundless />

app/(landing)/privacy/page.tsx

@@ -6,7 +6,7 @@ export const metadata: Metadata = generatePageMetadata('privacy');
 
 const PrivacyPage = () => {
   return (
-    <div className='mt-10 text-center text-4xl font-bold text-white'>
+    <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'>
       Privacy Page
     </div>
   );

app/(landing)/profile/[username]/layout.tsx

@@ -11,7 +11,7 @@ export const dynamic = 'force-dynamic';
 
 export default function ProfileLayout({ children }: ProfileLayoutProps) {
   return (
-    <main className='flex-1 px-6 py-5 md:px-10 md:py-20 xl:px-[100px]'>
+    <main className='mx-auto max-w-[1440px] flex-1 px-5 py-5 md:px-[50px] lg:px-[100px]'>
       <Suspense fallback={<ProfileLoadingFallback />}>{children}</Suspense>
     </main>
   );

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import MilstoneOverview from '@/components/project-details/project-milestone/milestone-details/MilstoneOverview';
+import MilestoneDetails from '@/components/project-details/project-milestone/milestone-details/MilestoneDetails';
+import MilestoneLinks from '@/components/project-details/project-milestone/milestone-details/MilestoneLinks';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+interface MilestonePageProps {
+  params: Promise<{
+    milestoneId: string; // This will be the milestone ID
+  }>;
+}
+
+const MilestonePage = async ({ params }: MilestonePageProps) => {
+  const { milestoneId } = await params;
+
+  return (
+    <section className='mx-auto mt-5 flex max-w-[1440px] flex-col justify-center gap-5 px-5 py-5 md:flex-row md:justify-between md:gap-18 md:px-[50px] lg:px-[100px]'>
+      <div className='w-full md:max-w-[500px]'>
+        <MilstoneOverview />
+      </div>
+      {/* <div className=''> */}
+      <Tabs defaultValue='details' className='w-full'>
+        <div className='border-b border-gray-800 py-0'>
+          <TabsList className='mb-0 h-auto w-fit justify-start gap-6 rounded-none bg-transparent p-0'>
+            <TabsTrigger
+              value='details'
+              className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-0 py-2 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white'
+            >
+              Details
+            </TabsTrigger>
+            <TabsTrigger
+              value='links'
+              className='data-[state=active]:border-primary rounded-none border-x-0 border-t-0 bg-transparent px-0 py-2 text-sm font-medium text-gray-400 transition-colors hover:text-gray-300 focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-none data-[state=active]:border-x-0 data-[state=active]:border-t-0 data-[state=active]:border-b-2 data-[state=active]:text-white md:hidden'
+            >
+              Links
+            </TabsTrigger>
+          </TabsList>
+        </div>
+        <TabsContent value='details'>
+          <MilestoneDetails milestoneId={milestoneId} />
+        </TabsContent>
+        <TabsContent value='links'>
+          <MilestoneLinks />
+        </TabsContent>
+      </Tabs>
+      {/* </div> */}
+    </section>
+  );
+};
+
+export default MilestonePage;