Feat build comment flow

app/comment/page.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useState } from 'react';
+import BoundlessSheet from '@/components/sheet/boundless-sheet';
+import { Button } from '@/components/ui/button';
+
+const Page = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+
+  const handleCommentSubmit = (comment: string) => {
+    // Handle comment submission here
+    // You can add your logic for processing the comment
+    // For example: API call, state update, etc.
+
+    // For now, we'll just acknowledge the comment
+    // This prevents the linter warning about unused parameters
+    if (comment && comment.trim()) {
+      // Comment is valid and can be processed
+      // Add your comment handling logic here
+      console.log('Comment submitted:', comment);
+
+      // Close the sheet after submission
+      setIsSheetOpen(false);
+    }
+  };
+
+  return (
+    <div className='p-8'>
+      <Button
+        onClick={() => setIsSheetOpen(true)}
+        className='px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700'
+      >
+        Open Comment Sheet
+      </Button>
+
+      <BoundlessSheet
+        open={isSheetOpen}
+        setOpen={setIsSheetOpen}
+        title='Add Comment'
+        side='bottom'
+      >
+        <div className='space-y-4'>
+          <div className='text-center text-gray-300 mb-6'>
+            <p>Share your thoughts and feedback</p>
+          </div>
+
+          <textarea
+            placeholder='Write your comment here...'
+            className='w-full p-3 border border-gray-600 rounded-lg bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+            rows={4}
+            id='comment-input'
+          />
+
+          <div className='flex gap-3'>
+            <Button
+              onClick={() => setIsSheetOpen(false)}
+              variant='outline'
+              className='flex-1'
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={() => {
+                const input = document.getElementById(
+                  'comment-input'
+                ) as HTMLTextAreaElement;
+                if (input && input.value.trim()) {
+                  handleCommentSubmit(input.value);
+                }
+              }}
+              className='flex-1 bg-blue-600 hover:bg-blue-700'
+            >
+              Submit Comment
+            </Button>
+          </div>
+        </div>
+      </BoundlessSheet>
+    </div>
+  );
+};
+
+export default Page;

app/globals.css

@@ -3,6 +3,30 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Custom scrollbar styles for comment modal */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #4a4a4a #1a1a1a;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #1a1a1a;
+  border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #4a4a4a;
+  border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #5a5a5a;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

app/page.tsx

@@ -1,14 +1,22 @@
 'use client';
+import { PriceDisplay } from '@/components/PriceDisplay';
+import EmptyState from '@/components/EmptyState';
 import { BoundlessButton } from '@/components/buttons';
+import { Coins, History, Plus } from 'lucide-react';
+import Card from '@/components/card';
+import RecentProjects from '@/components/overview/RecentProjects';
+import RecentContributions from '@/components/overview/ReecntContributions';
+import GrantHistory from '@/components/overview/GrantHistory';
 import { AuthNav } from '@/components/auth/AuthNav';
+import CommentModal from '@/components/comment/modal';
 import { motion } from 'framer-motion';
 import {
+  fadeInUp,
   staggerContainer,
   slideInFromLeft,
   slideInFromRight,
 } from '@/lib/motion';
 import PageTransition from '@/components/PageTransition';
-import Link from 'next/link';
 
 export default function Home() {
   return (
@@ -27,12 +35,101 @@ export default function Home() {
           <AuthNav />
         </motion.header>
         <motion.main
-          className='w-full max-w-6xl flex flex-col items-center justify-center'
-          variants={slideInFromRight}
+          className='flex flex-col gap-[32px] items-center sm:items-start'
+          variants={staggerContainer}
         >
-          <Link href='/user'>
-            <BoundlessButton>Go to Dashboard</BoundlessButton>
-          </Link>
+          <motion.div
+            className='bg-[#1C1C1C] rounded-lg p-4 w-full max-w-[550px]'
+            variants={fadeInUp}
+          >
+            <PriceDisplay price={100} className='text-2xl font-bold' />
+            <EmptyState
+              title='No comments yet'
+              description='Start by sharing your first project idea with the Boundless community. Once submitted, your projects will appear here for easy tracking.'
+              type='default'
+              action={
+                <CommentModal
+                  onCommentSubmit={comment =>
+                    console.log('Comment submitted:', comment)
+                  }
+                >
+                  <BoundlessButton
+                    variant='default'
+                    size='lg'
+                    icon={<Plus className='w-5 h-5' />}
+                    iconPosition='right'
+                  >
+                    Add comment
+                  </BoundlessButton>
+                </CommentModal>
+              }
+            />
+          </motion.div>
+          <motion.div className='flex gap-4' variants={staggerContainer}>
+            <motion.div variants={fadeInUp}>
+              <Card
+                title='Active Campaigns'
+                value='10'
+                bottomText={
+                  <div className='flex items-center gap-2'>
+                    <Coins className='w-4 h-4 text-white/60' />
+                    <PriceDisplay
+                      price={0}
+                      className='!text-xs !tracking-[-0.06px]'
+                    />
+                  </div>
+                }
+              />
+            </motion.div>
+            <motion.div variants={fadeInUp}>
+              <Card
+                title='Pending Submissions'
+                value='0'
+                bottomText={
+                  <div className='flex items-center gap-2'>
+                    <History className='w-4 h-4 text-white/60' />
+                    <span className='text-white/60'>No recent submissions</span>
+                  </div>
+                }
+              />
+            </motion.div>
+            <motion.div variants={fadeInUp}>
+              <Card
+                title='Active Projects'
+                value='0'
+                bottomText={
+                  <div className='flex items-center gap-2'>
+                    <span className='text-white/90'>0</span>
+                    Approved Submissions
+                  </div>
+                }
+              />
+            </motion.div>
+            <motion.div variants={fadeInUp}>
+              <Card
+                title='Available Grants'
+                value={
+                  <PriceDisplay price={0} className='!tracking-[-0.06px]' />
+                }
+                bottomText={
+                  <div className='flex items-center gap-2 text-white/90'>
+                    6 grants available
+                  </div>
+                }
+              />
+            </motion.div>
+          </motion.div>
+          <motion.div variants={fadeInUp}>
+            <RecentProjects projects={[]} />
+          </motion.div>
+          <motion.div className='flex gap-4' variants={staggerContainer}>
+            <motion.div variants={slideInFromLeft}>
+              <RecentContributions projects={[]} />
+            </motion.div>
+            <motion.div variants={slideInFromRight}>
+              <GrantHistory projects={[]} />
+            </motion.div>
+          </motion.div>
         </motion.main>
       </motion.div>
     </PageTransition>