feat(campaign): aggregate and feature campaign success stories (#812)

* feat: feat(campaign): Campaign success stories - aggregate and fea (#787)

* feat: feat(campaign): Campaign success stories - aggregate and fea (#787)

* feat: feat(campaign): Campaign success stories - aggregate and fea (#787)

* feat: feat(campaign): Campaign success stories - aggregate and fea (#787)

* feat: feat(campaign): Campaign success stories - aggregate and fea (#787)

* feat: feat(campaign): Campaign success stories - aggregate and fea (#787)

* feat: feat(campaign): Campaign success stories - aggregate and fea (#787)

---------

Co-authored-by: Aboogeeky <Idrishassan35@gmail.com>

Author: 339mon

apps/web/src/app/(overview)/campaigns/[id]/page.tsx

@@ -13,6 +13,7 @@ import {
   Share2,
   Edit,
   ShieldCheck,
+  Trophy,
   BarChart3,
   Globe,
   AlertTriangle,
@@ -94,6 +95,15 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
     impactStatement: "Permanently offset 150 metric tons of CO2 while securing habitat for 200+ endangered species.",
     beneficiaries: "5,000 local indigenous community members",
     co2OffsetTons: "150",
+    successStory: {
+      headline: "From Rainforest Pledge to On-the-Ground Impact",
+      creatorInterview: "Every XLM stream is tied to verifiable patrol hours and backers receive monthly GPS updates. The team shipped on every promise.",
+      backerTestimonials: [
+        { name: "Marta L.", location: "Lisbon, Portugal", quote: "I could see exactly where my contribution went." },
+        { name: "Devon K.", location: "Austin, TX", quote: "You can tell this is a team that ships." },
+        { name: "Priya N.", location: "Bengaluru, India", quote: "More campaigns should publish stories like this." },
+      ],
+    },
     treesPlanted: "1,500",
   };
 
@@ -290,6 +300,7 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
 {/* Main Content Tabs (Overview, Sponsor Wall #724, Co-Creators #722, Series, Analytics) */}
       {/* Backer community spaces (#788) render inside the overview sidebar. */}
       <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full space-y-6">
+        <TabsList className="grid w-full grid-cols-4 bg-zinc-900 border border-zinc-800 p-1 rounded-xl">
         <TabsList className="grid w-full grid-cols-5 bg-zinc-900 border border-zinc-800 p-1 rounded-xl">
           <TabsTrigger value="overview" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
             <Target className="mr-1.5 h-4 w-4" /> Overview & Story
@@ -300,6 +311,8 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
           <TabsTrigger value="collaboration" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
             <Users className="mr-1.5 h-4 w-4 text-purple-400" /> Co-Creators (#722)
           </TabsTrigger>
+          <TabsTrigger value="success" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
+            <Trophy className="mr-1.5 h-4 w-4 text-amber-400" /> Success Story
           <TabsTrigger value="series" className="text-xs font-semibold data-[state=active]:bg-purple-600 data-[state=active]:text-white">
             <Sparkles className="mr-1.5 h-4 w-4 text-amber-400" /> Series & Sequels
           </TabsTrigger>
@@ -368,6 +381,35 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
         <TabsContent value="collaboration">
           <CampaignCollaboration campaignId={campaign.id} campaignTitle={campaign.title} />
         </TabsContent>
+        {/* Tab 4: Success Story */}
+        <TabsContent value="success" className="space-y-6">
+          <div className="relative overflow-hidden rounded-2xl border border-emerald-800/60 bg-gradient-to-br from-emerald-950/40 via-zinc-900 to-zinc-900 p-6 md:p-8">
+            <div className="flex items-center gap-2">
+              <Badge className="bg-emerald-600 text-white font-semibold text-xs">
+                <Trophy className="mr-1 h-3 w-3" /> Featured Success Story
+              </Badge>
+            </div>
+            <h3 className="text-2xl font-extrabold text-zinc-50 mt-4">{campaign.successStory.headline}</h3>
+            <div className="mt-4 space-y-2 rounded-lg border border-zinc-800 bg-zinc-950/40 p-4">
+              <p className="text-xs font-bold uppercase tracking-wider text-purple-400">Creator Interview</p>
+              <p className="text-sm text-zinc-300 leading-relaxed">{campaign.successStory.creatorInterview}</p>
+            </div>
+          </div>
+          <div className="rounded-xl border border-zinc-800 bg-zinc-900/60 p-6 space-y-4">
+            <h4 className="text-sm font-bold text-zinc-100 flex items-center gap-2">
+              <Users className="h-4 w-4 text-purple-400" /> Backer Testimonials
+            </h4>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {campaign.successStory.backerTestimonials.map((testimonial) => (
+                <figure key={testimonial.name} className="rounded-xl border border-zinc-800 bg-zinc-950/60 p-4">
+                  <blockquote className="text-sm text-zinc-300 leading-relaxed">"{testimonial.quote}"</blockquote>
+                  <figcaption className="mt-3 text-xs text-zinc-400">
+                    <strong className="text-zinc-200">{testimonial.name}</strong> · {testimonial.location}
+                  </figcaption>
+                </figure>
+              ))}
+            </div>
+          </div>
 
         {/* Tab 4: Series & Sequels */}
         <TabsContent value="series">
@@ -435,4 +477,4 @@ export default function CampaignDetailPage({ params }: { params: Promise<{ id: s
       )}
     </div>
   );
-}
+}

apps/web/src/app/(overview)/campaigns/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Rocket, Plus, Heart, Users, Sparkles, ShieldCheck, ChevronRight, Trophy, Scale, ShoppingBag } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import SuccessStories from "@/components/modules/campaign/success-stories/SuccessStories";
 
 export default function CampaignsDirectoryPage() {
   const campaigns = [
@@ -36,6 +37,8 @@ export default function CampaignsDirectoryPage() {
 
   return (
     <div className="container mx-auto px-4 py-8 max-w-6xl space-y-8">
+      <!-- Header -->
+      <div className="flex flex-col sm-flex-row sm-items-center sm-justify-between gap-4 border-b border-zinc-800 pb-6">
       {/* Header */}
       <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b border-zinc-800 pb-6">
         <div>
@@ -48,6 +51,11 @@ export default function CampaignsDirectoryPage() {
           </p>
         </div>
 
+        <Link href="/campaigns/create">
+          <Button className="bg-gradient-to-r from-purple-600 to-blue-600 font-semibold text-white hover-from-purple-700 hover-to-blue-700 shadow-lg shadow-purple-900/30">
+            <Plus className="mr-2 h-4 w-4" /> Create Campaign Wizard (#720)
+          </Button>
+        </Link>
 <div className="flex flex-wrap items-center gap-2">
           <Link href="/campaigns/compare">
             <Button variant="outline" className="border-purple-800 bg-purple-950/40 text-purple-300 hover:bg-purple-900/60 font-semibold text-xs">
@@ -75,14 +83,18 @@ export default function CampaignsDirectoryPage() {
         </div>
       </div>
 
-      {/* Campaigns Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <!-- Success Stories Section -->
+      <SuccessStories />
+
+      <!-- Campaigns Grid -->
+      <div className="grid grid-cols-1 md-grid-cols-2 gap-6">
         {campaigns.map((c) => {
           const progress = Math.round((parseFloat(c.raisedAmount.replace(/,/g, "")) / parseFloat(c.goalAmount.replace(/,/g, ""))) * 100);
           return (
             <div
               key={c.id}
-              className="group flex flex-col justify-between rounded-xl border border-zinc-800 bg-zinc-900/80 p-6 shadow-xl transition-all duration-300 hover:border-purple-500/50 hover:shadow-2xl"
+              className="group flex flex-col justify-between rounded-xl border border-zinc-800 bg-zinc-900/80 p-6 shadow-xl transition-all duration-300 hover:border-purple-500/50 
+hover:shadow-2xl"
             >
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
@@ -106,11 +118,11 @@ export default function CampaignsDirectoryPage() {
                   <span className="text-emerald-400 font-bold">{progress}% Goal</span>
                 </div>
 
-                {/* Progress bar */}
+                <!-- Progress bar -->
                 <div className="h-1.5 w-full overflow-hidden rounded-full bg-zinc-800">
                   <div
                     className="h-full rounded-full bg-gradient-to-r from-purple-500 to-emerald-400"
-                    style={{ width: `${progress}%` }}
+                    style={ width: `${progress}%` }
                   />
                 </div>
 
@@ -126,8 +138,8 @@ export default function CampaignsDirectoryPage() {
                     </span>
                   </div>
 
-                  <Link href={`/campaigns/${c.id}`}>
-                    <Button size="sm" variant="ghost" className="text-xs text-purple-400 hover:text-purple-300 hover:bg-purple-950/40">
+                  <Link href={"/campaigns/${c.id}"}>
+                    <Button size="sm" variant="ghost" className="text-xs text-purple-400 hover-text-purple-300 hover-bg-purple-950/40">
                       View Campaign <ChevronRight className="ml-1 h-3.5 w-3.5" />
                     </Button>
                   </Link>
@@ -139,4 +151,4 @@ export default function CampaignsDirectoryPage() {
       </div>
     </div>
   );
-}
+}

apps/web/src/app/api/campaigns/success-stories/route.ts

@@ -0,0 +1,73 @@
+import { NextResponse } from 'next/server';
+
+// Mock data for campaign success stories
+// In a real implementation, this would come from a database or external service
+const successStories = [
+  {
+    id: 'story-001',
+    campaignId: 'camp-101',
+    title: 'Save the Amazon RainForest Reserve',
+    category: 'Environmental & Reforestation',
+    raisedAmount: '33,850',
+    goalAmount: '50,000',
+    token: 'XLM',
+    sponsorCount: 6,
+    collaboratorCount: 2,
+    status: 'COMPLETED',
+    description: 'Despite not reaching the full goal, the campaign successfully purchased 25,000 hectares of critical rainforest and implemented the first phase of community-led guardianship.',
+    coverImageUrl: '/images/success-stories/amazon.jpg',
+    creatorInterview: {
+      id: 'int-001',
+      quote: 'We proved that small-scale grassroots funding can make a real impact. The backers faith kept us going, and we delivered on our promise to protect the land.',
+      author: 'Maria Alvarez',
+      role: 'Lead Organizer, Amazon Reserve Initiative',
+      avatarUrl: '/images/avatars/maria.jpg',
+    },
+    backerTestimonials: [
+      {
+        id: 'test-001',
+        author: 'John Doe',
+        content: 'Been part of this journey was incredible. The team kept us updated every step of the way and the land is now protected.',
+        rating: 5,
+      {
+        id: 'test-002',
+        author: 'Jane Smith',
+        content: 'I’ve funded many campaigns, but this one truly shipped. Transparency and results exceeded my expectations.',
+        rating: 5,
+      },
+    ],
+  },
+  {
+    id: 'story-002',
+    campaignId: 'camp-102',
+    title: 'Clean Water Wells for Sub-Saharan Communities',
+    category: 'Community & Social Impact',
+    raisedAmount: '18,200',
+    goalAmount: '25,000',
+    token: 'USDC',
+    sponsorCount: 14,
+    collaboratorCount: 3,
+    status: 'SUCCESS',
+    description: 'Successfully installed 8 of the 12 planned solar-powered water filtration wells, bringing clean water to over 5,000 people.',
+    coverImageUrl: '/images/success-stories/water-wells.jpg',
+    creatorInterview: {
+      id: 'int-002',
+      quote: 'The community support was overwhelming. We were able to scale our initial plan and now villages have access to safe drinking water.',
+      author: 'David Ochieng',
+      role: 'Project Director, Water for All',
+      avatarUrl: '/images/avatars/david.jpg',
+    },
+    backerTestimonials: [
+      {
+        id: 'test-003',
+        author: 'Alice Brown',
+        content: 'I’m proud to support a campaign that delivered tangible results. The photos and stories from the field were heartwarming.',
+        rating: 5,
+      },
+    ],
+  },
+];
+
+export async function GET() {
+  return NextResponse.json(successStories);
+}

apps/web/src/components/modules/campaign/success-stories/SuccessStories.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Trophy, Star, Quote, Users, Heart } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { getSuccessStories, SuccessStory } from "@/services/campaign-success.service";
+
+export default function SuccessStories() {
+  const [stories, setStories] = useState<SuccessStory[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchStories = async () => {
+      try {
+        const data = await getSuccessStories();
+        setStories(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load success stories");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchStories();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="rounded-xl border border-zinc-800 bg-zinc-900/80 p-6 shadow-xl animate-pulse">
+        <div className="h-6 w-40 bg-zinc-800 rounded mb-4" />
+        <div className="grid md-grid-cols-2 gap-6">
+          <div className="h-48 bg-zinc-800 rounded" />
+          <div className="h-48 bg-zinc-800 rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-xl border border-red-800/50 bg-red-950/20 p-6 text-red-300">
+        <p className="text-sm font-semibold">Error loading success stories:</p>
+        <p className="text-xs mt-1">{error}</p>
+      </div>
+    );
+  }
+
+  if (stories.length === 0) {
+    return null; // or some fallback
+  }
+
+  return (
+    <section className="space-y-6">
+      <div className="border-b border-zinc-800 pb-4">
+        <h2 className="text-2xl font-extrabold text-zinc-50 tracking-tight flex items-center gap-2">
+          <Trophy className="h-6 w-6 text-amber-400" />
+          Success Stories</h2>
+          <p className="mt-1 text-sm text-zinc-400">
+            Campaigns that shipped and delivered real impact. Hear directly from creators and backers.
+          </p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md-grid-cols-2 gap-6">
+        {stories.map((story) => {
+          const progress = Math.round(
+            (parseFloat(story.raisedAmount.replace(/,/g, "")) /
+              parseFloat(story.goalAmount.replace(/,/g, "")) ) *
+              100
+          );
+
+          return (
+            <article
+              key={story.id}
+              className="flex flex-col rounded-xl border border-emerald-500/30 bg-zinc-900/80 p-6 shadow-xl transition-all duration-300 hover:border-emerald-400/50 hover-shadow-2xl"
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="space-y-2">
+                  <Badge className="bg-emerald-950/60 text-emerald-300 border-emerald-800 text-[11px]">
+                    {story.category}
+                  </Badge>
+                  <h3 className="text-xl font-bold text-zinc-100">{story.title}</h3>
+                  <p className="text-xs text-zinc-400 line-clamp-3 leading-relaxed">
+                    {story.description}
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-4 grid grid-cols-2 grid-gap-4 text-xs">
+                <div className="rounded-lg bg-zinc-800/50 p-3">
+                  <p className="text-zinc-500">Raised</p>
+                  <p className="font-bold text-zinc-100">
+                    {story.raisedAmount} {story.token}
+                  </p>
+                </div>
+                <div className="rounded-lg bg-zinc-800/50 p-3">
+                  <p className="text-zinc-500">Progress</p>
+                  <p className="font-bold text-emerald-40">{progress}%</p>
+                </div>
+              </div>
+
+              <div className="mt-4 space-y-2 rounded-lg border border-purple-500/20 bg-purple-950/20 p-4">
+                <div className="flex items-center gap-2 text-purple-300 text-xs font-semibold uppercase tracking-wide">
+                  <Quote className="h-3.5 w-3.5" /> Creator Interview
+                </div>
+                <blockquote className="text-sm text-zinc-300 italic leading-relaxed">
+                  “{story.creatorInterview.quote}”
+                </blockquote>
+                <figcaption className="text-xs text-zinc-500">
+                  -¬ {story.creatorInterview.author}, {story.creatorInterview.role}
+                </figcaption>
+              </div>
+
+              <div className="mt-4 space-y-3">
+                <div className="flex items-center gap-2 text-amber-300 text-xs font-semibold uppercase tracking-wide">
+                  <Users className="h-3.5 w-3.5" /> Backer Testimonials
+                </div>
+                {story.backerTestimonials.slice(0, 2).map((testimonial) => (
+                  <div key={testimonial.id} className="rounded-lg bg-zinc-800/30 p-3 text-sm">
+                    <div className="flex items-center justify-between">
+                      <span className="font-semibold text-zinc-300">{testimonial.author}</span>
+                      <div className="flex items-center gap-0.5">
+                        {Array.from({length: testimonial.rating ?? 5}).map((_, i) => (
+                          <Star key={i} className="h-3 w-3 fill-amber-400 text-amber-400" />
+                        ))}
+                      </div>
+                    </div>
+                    <p className="mt-1 text-xs text-zinc-400 leading-relaxed">{testimonial.content}</p>
+                  </div>
+                ))}
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </section>
+  );
+}