Merge pull request #850 from ndii-dev/feat/issue-828-skills-taxonomy

feat(frontend): add skills taxonomy and auto-suggest combobox for bounty tags

Author: yosemite01

app/api/skills/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { searchSkills } from '@/lib/skills-taxonomy'
+
+export const runtime = 'edge'
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url)
+  const q = searchParams.get('q') ?? ''
+  const limit = Math.min(parseInt(searchParams.get('limit') ?? '8', 10), 20)
+
+  const skills = searchSkills(q, limit)
+  return NextResponse.json({ skills, total: skills.length, query: q })
+}

app/api/testimonials/[id]/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getStore } from '../route';
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: { id: string } },
+) {
+  const { id } = params;
+  const body = await request.json().catch(() => null);
+
+  if (!body || typeof body.featured !== 'boolean') {
+    return NextResponse.json(
+      { error: '`featured` (boolean) is required in the request body' },
+      { status: 400 },
+    );
+  }
+
+  const store = getStore();
+  const testimonial = store.find((t) => t.id === id);
+
+  if (!testimonial) {
+    return NextResponse.json({ error: 'Testimonial not found' }, { status: 404 });
+  }
+
+  testimonial.featured = body.featured;
+
+  return NextResponse.json({ testimonial });
+}

app/api/testimonials/route.ts

@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from 'next/server';
+import type { Testimonial } from '@/components/testimonials';
+
+// In-memory store (mirrors component data; replace with Prisma in production)
+const store: Testimonial[] = [
+  {
+    id: '1',
+    clientId: 'client-001',
+    creatorId: 'creator-001',
+    bountyId: 'bounty-101',
+    author: 'Sarah Chen',
+    role: 'Product Manager, TechStartup',
+    quote:
+      'Stellar connected us with incredible designers who transformed our product. The process was seamless and professional.',
+    rating: 5,
+    featured: true,
+    createdAt: '2024-11-12T10:00:00Z',
+    bountyTitle: 'Dashboard UI Redesign',
+    creatorProfile: { name: 'Alex Rivera', slug: 'alex-rivera' },
+  },
+  {
+    id: '2',
+    clientId: 'client-002',
+    creatorId: 'creator-002',
+    bountyId: 'bounty-102',
+    author: 'Marcus Johnson',
+    role: 'UI/UX Designer',
+    quote:
+      'As a freelancer, this platform gave me access to high-quality projects and clients who truly value creative work.',
+    rating: 5,
+    featured: true,
+    createdAt: '2024-12-01T14:30:00Z',
+    bountyTitle: 'Mobile App Prototype',
+    creatorProfile: { name: 'Jordan Kim', slug: 'jordan-kim' },
+    videoUrl: 'https://assets.stellar.app/testimonials/marcus-johnson.mp4',
+  },
+  {
+    id: '3',
+    clientId: 'client-003',
+    creatorId: 'creator-003',
+    bountyId: 'bounty-103',
+    author: 'Emily Rodriguez',
+    role: 'Marketing Director, GrowthCo',
+    quote:
+      'The bounty system is revolutionary. We found the perfect content creator for our campaign in days, not weeks.',
+    rating: 5,
+    featured: true,
+    createdAt: '2025-01-08T09:15:00Z',
+    bountyTitle: 'Brand Campaign Content',
+    creatorProfile: { name: 'Sam Okafor', slug: 'sam-okafor' },
+  },
+];
+
+export function getStore(): Testimonial[] {
+  return store;
+}
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const featuredParam = searchParams.get('featured');
+  const limit = Math.min(parseInt(searchParams.get('limit') ?? '10', 10), 50);
+
+  let results = [...store];
+
+  if (featuredParam === 'true') {
+    results = results.filter((t) => t.featured);
+  } else if (featuredParam === 'false') {
+    results = results.filter((t) => !t.featured);
+  }
+
+  results = results.slice(0, limit);
+
+  return NextResponse.json({ testimonials: results, total: results.length });
+}

components/testimonials.tsx

@@ -1,47 +1,171 @@
 'use client';
 
+import Link from 'next/link';
 import { Star } from 'lucide-react';
 
-interface Testimonial {
+export interface Testimonial {
   id: string;
-  text: string;
+  clientId: string;
+  creatorId: string;
+  bountyId?: string;
+  /** Display name of the client/author */
   author: string;
   role: string;
+  quote: string;
   rating: number;
+  featured: boolean;
+  createdAt: string;
+  creatorProfile?: { name: string; avatar?: string; slug: string };
+  bountyTitle?: string;
+  /** S3 URL for a video testimonial */
+  videoUrl?: string;
 }
 
 const testimonials: Testimonial[] = [
   {
     id: '1',
-    text: 'Stellar connected us with incredible designers who transformed our product. The process was seamless and professional.',
+    clientId: 'client-001',
+    creatorId: 'creator-001',
+    bountyId: 'bounty-101',
     author: 'Sarah Chen',
     role: 'Product Manager, TechStartup',
+    quote:
+      'Stellar connected us with incredible designers who transformed our product. The process was seamless and professional.',
     rating: 5,
+    featured: true,
+    createdAt: '2024-11-12T10:00:00Z',
+    bountyTitle: 'Dashboard UI Redesign',
+    creatorProfile: { name: 'Alex Rivera', slug: 'alex-rivera' },
   },
   {
     id: '2',
-    text: 'As a freelancer, this platform gave me access to high-quality projects and clients who truly value creative work.',
+    clientId: 'client-002',
+    creatorId: 'creator-002',
+    bountyId: 'bounty-102',
     author: 'Marcus Johnson',
     role: 'UI/UX Designer',
+    quote:
+      'As a freelancer, this platform gave me access to high-quality projects and clients who truly value creative work.',
     rating: 5,
+    featured: true,
+    createdAt: '2024-12-01T14:30:00Z',
+    bountyTitle: 'Mobile App Prototype',
+    creatorProfile: { name: 'Jordan Kim', slug: 'jordan-kim' },
+    videoUrl: 'https://assets.stellar.app/testimonials/marcus-johnson.mp4',
   },
   {
     id: '3',
-    text: 'The bounty system is revolutionary. We found the perfect content creator for our campaign in days, not weeks.',
+    clientId: 'client-003',
+    creatorId: 'creator-003',
+    bountyId: 'bounty-103',
     author: 'Emily Rodriguez',
     role: 'Marketing Director, GrowthCo',
+    quote:
+      'The bounty system is revolutionary. We found the perfect content creator for our campaign in days, not weeks.',
     rating: 5,
+    featured: true,
+    createdAt: '2025-01-08T09:15:00Z',
+    bountyTitle: 'Brand Campaign Content',
+    creatorProfile: { name: 'Sam Okafor', slug: 'sam-okafor' },
   },
 ];
 
-export function TestimonialsSection() {
+/** Initials avatar fallback */
+function InitialsAvatar({ name }: { name: string }) {
+  const initials = name
+    .split(' ')
+    .map((w) => w[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase();
+  return (
+    <span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-accent/20 text-accent font-semibold text-sm select-none">
+      {initials}
+    </span>
+  );
+}
+
+function CaseStudyCard({ testimonial }: { testimonial: Testimonial }) {
+  return (
+    <div className="flex flex-col bg-card border border-border rounded-lg p-8 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
+      {/* Rating */}
+      <div className="flex gap-1 mb-4">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Star
+            key={i}
+            size={18}
+            className={i < testimonial.rating ? 'fill-accent text-accent' : 'text-muted-foreground'}
+          />
+        ))}
+      </div>
+
+      {/* Quote */}
+      <p className="text-foreground mb-4 italic leading-relaxed flex-1">
+        &ldquo;{testimonial.quote}&rdquo;
+      </p>
+
+      {/* Optional video testimonial */}
+      {testimonial.videoUrl && (
+        <div className="mb-4 rounded-md overflow-hidden border border-border">
+          <video
+            src={testimonial.videoUrl}
+            controls
+            muted
+            playsInline
+            className="w-full max-h-48 object-cover"
+            aria-label={`Video testimonial from ${testimonial.author}`}
+          />
+        </div>
+      )}
+
+      {/* Author */}
+      <div className="flex items-center gap-3 mb-4">
+        <InitialsAvatar name={testimonial.author} />
+        <div>
+          <p className="font-semibold text-foreground leading-tight">{testimonial.author}</p>
+          <p className="text-sm text-muted-foreground">{testimonial.role}</p>
+        </div>
+      </div>
+
+      {/* Links */}
+      <div className="flex flex-wrap gap-3 text-sm mt-auto">
+        {testimonial.creatorProfile && (
+          <Link
+            href={`/creators/${testimonial.creatorProfile.slug}`}
+            className="text-accent hover:underline font-medium"
+          >
+            View creator &rarr;
+          </Link>
+        )}
+        {testimonial.bountyId && (
+          <Link
+            href={`/bounties/${testimonial.bountyId}`}
+            className="text-muted-foreground hover:text-foreground hover:underline"
+          >
+            View bounty &rarr;
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface TestimonialsSectionProps {
+  featuredOnly?: boolean;
+}
+
+export function TestimonialsSection({ featuredOnly = true }: TestimonialsSectionProps) {
+  const displayed = featuredOnly
+    ? testimonials.filter((t) => t.featured)
+    : testimonials;
+
   return (
     <section className="py-20 sm:py-32 bg-muted/30 border-b border-border">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Section Header */}
         <div className="text-center mb-16">
           <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-4">
-            Loved by Creators & Clients
+            Loved by Creators &amp; Clients
           </h2>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
             See what industry leaders are saying about Stellar
@@ -50,29 +174,8 @@ export function TestimonialsSection() {
 
         {/* Testimonials Grid */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {testimonials.map((testimonial) => (
-            <div
-              key={testimonial.id}
-              className="bg-card border border-border rounded-lg p-8 hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
-            >
-              {/* Rating */}
-              <div className="flex gap-1 mb-4">
-                {Array.from({ length: testimonial.rating }).map((_, i) => (
-                  <Star key={i} size={18} className="fill-accent text-accent" />
-                ))}
-              </div>
-
-              {/* Quote */}
-              <p className="text-foreground mb-6 italic leading-relaxed">
-                "{testimonial.text}"
-              </p>
-
-              {/* Author */}
-              <div>
-                <p className="font-semibold text-foreground">{testimonial.author}</p>
-                <p className="text-sm text-muted-foreground">{testimonial.role}</p>
-              </div>
-            </div>
+          {displayed.map((testimonial) => (
+            <CaseStudyCard key={testimonial.id} testimonial={testimonial} />
           ))}
         </div>
       </div>