-
- {tiers.map((tier, index) => (
-
- ))}
+ {/* Only the tiers scroll, in two copies for a seamless loop. */}
+
);
}
-
-/** Total prize pool with an infinitely scrolling tier breakdown. */
-export function PrizePool({
- total = '300,000',
- currency = 'USDC',
- label = 'Total Prize Pool',
- tiers = DEFAULT_TIERS,
- className,
-}: PrizePoolProps) {
- const block = { total, currency, label, tiers };
- return (
-
- {/* Track holds two identical copies so the loop is seamless. */}
-
-
- );
-}
diff --git a/src/features/marketing/components/testimonials.tsx b/src/features/marketing/components/testimonials.tsx
index e4b2811..ad58d04 100644
--- a/src/features/marketing/components/testimonials.tsx
+++ b/src/features/marketing/components/testimonials.tsx
@@ -1,11 +1,177 @@
-import { Placeholder } from './placeholder';
-import { Section } from './section';
+import { ArrowUpRight } from 'lucide-react';
+import Image from 'next/image';
-/** Testimonials. Plain scaffold pending design. */
+import { SocialGlyph } from '@/components/layout/brand-icons';
+import { cn } from '@/lib/utils';
+
+type Testimonial = {
+ name: string;
+ handle: string;
+ avatar: string;
+ quote: string;
+};
+
+// Two rows that scroll in opposite directions. Avatars reuse the team photos.
+const ROW_ONE: Testimonial[] = [
+ {
+ name: 'Alex Carter',
+ handle: '@alexcarterx',
+ avatar: '/team/team1.svg',
+ quote:
+ 'I have used multiple bounty platforms before, but @boundless_fi was the first one that actually enforced delivery and payment through escrow instead of blind trust.',
+ },
+ {
+ name: 'Daniel Kim',
+ handle: '@danielbuilds',
+ avatar: '/team/team2.svg',
+ quote:
+ 'Winning a hackathon on @boundless_fi did not feel like the end of the journey. The milestone continuation model helped our team keep building after the event.',
+ },
+ {
+ name: 'Maya Thompson',
+ handle: '@mayathompson',
+ avatar: '/team/team3.svg',
+ quote:
+ 'The reputation layer on @boundless_fi makes each milestone meaningful. Your work history actually compounds into something you own.',
+ },
+];
+
+const ROW_TWO: Testimonial[] = [
+ {
+ name: 'James Okoro',
+ handle: '@jamesbuilds',
+ avatar: '/team/team4.svg',
+ quote:
+ 'What sold me on @boundless_fi was how simple the experience is for the team, while the blockchain infrastructure stays underneath.',
+ },
+ {
+ name: 'Marcus Reid',
+ handle: '@marcusreidx',
+ avatar: '/team/team2.svg',
+ quote:
+ 'Most platforms only help you find work. @boundless_fi feels like infrastructure for building long-term reputation in Web3.',
+ },
+ {
+ name: 'Chloe Bennett',
+ handle: '@chloebennett',
+ avatar: '/team/team1.svg',
+ quote:
+ 'The milestone tracking UI on @boundless_fi gave our community full visibility into project progress and fund releases.',
+ },
+];
+
+function Card({ name, handle, avatar, quote }: Testimonial) {
+ return (
+
+ {/* Border accent lines (exact Figma specs), over a faint base rim.
+ Top: a white gradient line across the top edge, fading at both ends. */}
+
+ {/* Bottom: a shorter white gradient line set toward the left. */}
+
+ {/* Green accent on the left edge (Figma: 53px line, gradient fading at
+ both ends, #4BDD74 at ~0.6 in the middle). */}
+
+
+
+
+ {name}
+ {handle}
+
+
+
{quote}
+
+ );
+}
+
+function Row({
+ items,
+ direction,
+}: {
+ items: Testimonial[];
+ direction: 'left' | 'right';
+}) {
+ // Duplicate the row so the -50% loop lands on an identical copy.
+ const loop = [...items, ...items];
+ return (
+
+ {loop.map((item, index) => (
+
+ ))}
+
+ );
+}
+
+/**
+ * "Trusted by Builders Worldwide": two horizontally scrolling rows of social
+ * testimonials. Hidden on mobile per the design.
+ */
export function Testimonials() {
return (
-
+
+
+
+
+
+ Trusted by{' '}
+ Builders Worldwide
+
+
+ Hear how communities, founders and contributors are creating
+ impact through Boundless.
+
+
+
+ {/* Liquid-glass CTA, scaled from a 282px reference to this ~44px
+ pill. The lit border runs only along the top-left -> bottom-right
+ diagonal (where light enters and exits): a 135deg gradient ring,
+ bright at those two corners and transparent at the top-right and
+ bottom-left, rendered via a masked overlay. A top-left radial
+ highlight sets the light direction and diagonal inset bevels form
+ the refractive lens edge. The fill stays dark/translucent over the
+ 10px backdrop blur, with only a faint inner frost. */}
+
+
+
+ Follow Boundless
+
+
+
+
+ |
+ |
+
+
);
}