Merge to main

.cursor/rules/trustless-rule.mdc

@@ -0,0 +1,55 @@
+---
+alwaysApply: true
+---
+You are a **Senior Front-End Developer** and **Expert** in:
+- ReactJS, NextJS, JavaScript, TypeScript
+- TailwindCSS, Shadcn, Radix UI
+- HTML, CSS, and modern UI/UX best practices
+
+You are methodical, precise, and a master at reasoning through complex requirements. You always provide correct, DRY, bug-free, production-ready code.
+
+## General Rules
+- Follow the user’s requirements **exactly** as stated.
+- Think step-by-step:  
+  1. **Analyze** the requirement.  
+  2. **Write detailed pseudocode** describing the implementation plan.  
+  3. **Confirm** the plan (if asked).  
+  4. **Write complete code** that matches the plan.  
+- Never guess. If something is unclear, ask for clarification.
+- If an external library is mentioned, always refer to its official documentation before implementation.
+- Always ensure the final code is fully functional, with no placeholders, `TODO`s, or missing parts.
+- Prefer readability over performance.
+- Use best practices for React & Next.js development.
+- Do not use cd in order to access to determinate root, neither use &&, | or something like that in shell actions.
+- Do not verify the build during the Trustless Work implementations.
+- In each npm i, the name of the dependency must be enclosed in double quotation marks (“”).
+- Do not ask for 2 o more ways to implement, just do it the best way possible.
+- Do not plan or ask for steps; just implement the code without asking questions.
+
+## Trustless Work Integration Context
+When working with Trustless Work:
+- Documentation (I'll provide you the docs in the cursor docs management):  
+  - React Library → <https://docs.trustlesswork.com/trustless-work/react-library>  
+  - Wallet Kit → <https://docs.trustlesswork.com/trustless-work/developer-resources/stellar-wallet-kit-quick-integration>  
+  - Types → <https://docs.trustlesswork.com/trustless-work/developer-resources/types>  
+- Ensure proper installation and configuration before usage.
+- Use provided Types from the documentation when applicable.
+- Follow the API and component usage exactly as described in the docs.
+- Do not use any, instead always you must search for the Trustless Work entities.
+
+## Code Implementation Guidelines
+- Use **TailwindCSS classes** for styling; avoid plain CSS.
+- For conditional classes, prefer `clsx` or similar helper functions over ternary operators in JSX.
+- Use **descriptive** variable, function, and component names.  
+  - Event handlers start with `handle` (e.g., `handleClick`, `handleSubmit`).
+- Prefer **const** arrow functions with explicit type annotations over `function` declarations.
+- Always include all necessary imports at the top.
+- Use early returns to improve code clarity.
+
+## Verification Before Delivery
+Before finalizing:
+1. Check that all required imports are present.
+2. Ensure the code compiles in a Next.js 14+ environment.
+3. Confirm that Tailwind and Shadcn styles render correctly.
+4. Verify that Trustless Work components or hooks are properly initialized.
+5. Ensure TypeScript types are correct and there are no type errors.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -208,6 +208,10 @@ Before you begin, ensure you have the following installed:
    # Stellar Configuration
    NEXT_PUBLIC_STELLAR_NETWORK=testnet
    NEXT_PUBLIC_APP_URL=http://localhost:3000
+
+   # Trustless Work Configuration (optional)
+   # Get your API key from: https://docs.trustlesswork.com
+   NEXT_PUBLIC_TRUSTLESS_WORK_API_KEY=your-trustless-work-api-key
    ```
 
 6. **Run the development server:**

app/(landing)/bounties/page.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Metadata } from 'next';
+import { generatePageMetadata } from '@/lib/metadata';
+
+export const metadata: Metadata = generatePageMetadata('grants');
+
+const GrantPage = () => {
+  return (
+    <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]'>
+      Bounties Page
+    </div>
+  );
+};
+
+export default GrantPage;

app/(landing)/hackathons/[slug]/page.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import { useRouter, useSearchParams, useParams } from 'next/navigation';
+import { useHackathonData } from '@/lib/providers/hackathonProvider';
+
+import { HackathonBanner } from '@/components/hackathons/hackathonBanner';
+import { HackathonNavTabs } from '@/components/hackathons/hackathonNavTabs';
+import { HackathonOverview } from '@/components/hackathons/overview/hackathonOverview';
+import { HackathonParticipants } from '@/components/hackathons/participants/hackathonParticipant';
+import { HackathonResources } from '@/components/hackathons/resources/resources';
+import SubmissionTab from '@/components/hackathons/submissions/submissionTab';
+import { HackathonDiscussions } from '@/components/hackathons/discussion/comment';
+import LoadingScreen from '@/components/landing-page/project/CreateProjectModal/LoadingScreen';
+
+export default function HackathonPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const params = useParams();
+
+  const {
+    currentHackathon,
+    content,
+    timelineEvents,
+    participants,
+    submissions,
+    prizes,
+    loading,
+    setCurrentHackathon,
+  } = useHackathonData();
+
+  const hackathonTabs = useMemo(
+    () => [
+      { id: 'overview', label: 'Overview' },
+      { id: 'participants', label: 'Participants', badge: participants.length },
+      { id: 'resources', label: 'Resources' },
+      {
+        id: 'submission',
+        label: 'Submissions',
+        badge: submissions.filter(p => p.status === 'Approved').length,
+      },
+      { id: 'discussions', label: 'Discussions' },
+    ],
+    [participants.length, submissions]
+  );
+
+  const hackathonId = params.slug as string;
+  const [activeTab, setActiveTab] = useState('overview');
+
+  useEffect(() => {
+    if (hackathonId) {
+      setCurrentHackathon(hackathonId);
+    }
+  }, [hackathonId, setCurrentHackathon]);
+
+  useEffect(() => {
+    const tabFromUrl = searchParams.get('tab');
+    if (tabFromUrl && hackathonTabs.some(tab => tab.id === tabFromUrl)) {
+      setActiveTab(tabFromUrl);
+    }
+  }, [searchParams, hackathonTabs]);
+
+  const handleTabChange = (tabId: string) => {
+    setActiveTab(tabId);
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('tab', tabId);
+    router.push(`?${params.toString()}`, { scroll: false });
+  };
+
+  if (loading) {
+    return <LoadingScreen />;
+  }
+
+  if (!currentHackathon) {
+    return (
+      <div className='flex min-h-screen items-center justify-center'>
+        <div className='text-center'>
+          <h1 className='mb-4 text-2xl font-bold text-white'>
+            Hackathon not found
+          </h1>
+          <p className='text-gray-400'>
+            The hackathon you're looking for doesn't exist.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <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]'>
+      {/* Banner */}
+      <HackathonBanner
+        title={currentHackathon.title}
+        subtitle={currentHackathon.subtitle}
+        deadline={currentHackathon.deadline}
+        categories={currentHackathon.categories}
+        status={currentHackathon.status}
+        participants={currentHackathon.participants}
+        totalPrizePool={currentHackathon.totalPrizePool}
+        imageUrl={currentHackathon.imageUrl}
+        startDate={currentHackathon.startDate} // if upcoming
+      />
+
+      {/* Tabs */}
+      <HackathonNavTabs
+        tabs={hackathonTabs}
+        activeTab={activeTab}
+        onTabChange={handleTabChange}
+      />
+
+      {/* Content */}
+      <div className='mx-auto max-w-7xl px-6 py-12 text-white'>
+        {activeTab === 'overview' && (
+          <HackathonOverview
+            content={content}
+            timelineEvents={timelineEvents}
+            prizes={prizes}
+          />
+        )}
+
+        {activeTab === 'participants' && <HackathonParticipants />}
+
+        {activeTab === 'resources' && <HackathonResources />}
+
+        {activeTab === 'submission' && <SubmissionTab />}
+
+        {activeTab === 'discussions' && (
+          <HackathonDiscussions hackathonId={hackathonId} />
+        )}
+      </div>
+    </div>
+  );
+}

app/(landing)/hackathons/layout.tsx

@@ -0,0 +1,22 @@
+import { HackathonDataProvider } from '@/lib/providers/hackathonProvider';
+import { use } from 'react';
+
+interface HackathonLayoutProps {
+  children: React.ReactNode;
+  params: Promise<{
+    slug?: string;
+  }>;
+}
+
+export default function HackathonLayout({
+  children,
+  params,
+}: HackathonLayoutProps) {
+  const resolvedParams = use(params);
+
+  return (
+    <HackathonDataProvider hackathonSlug={resolvedParams.slug}>
+      {children}
+    </HackathonDataProvider>
+  );
+}

app/(landing)/hackathons/page.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
 import { Metadata } from 'next';
 import { generatePageMetadata } from '@/lib/metadata';
+import HackathonsPageHero from '@/components/hackathons/HackathonsPageHero';
+import HackathonsPage from '@/components/hackathons/HackathonsPage';
 
 export const metadata: Metadata = generatePageMetadata('hackathons');
 
-const HackathonsPage = () => {
+export default function HackathonsPageRoute() {
   return (
-    <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 className='relative mx-auto min-h-screen max-w-[1440px] px-5 py-5 md:px-[50px] lg:px-[100px]'>
+      <HackathonsPageHero />
+      <HackathonsPage />
     </div>
   );
-};
-
-export default HackathonsPage;
+}