feat(marketing): ecosystem trust bar + "Every Funding Path" program selector

src/app/(public)/page.tsx

@@ -5,6 +5,7 @@ import {
   CtaSection,
   Faq,
   FundingPaths,
+  FundingPrograms,
   HeroSection,
   MarketingButton,
   NewsSection,
@@ -63,6 +64,7 @@ export default function HomePage() {
         </div>
       </HeroSection>
       <TrustBar />
+      <FundingPrograms />
       <FundingPaths />
       <Personas />
       <Testimonials />

src/features/marketing/components/funding-programs.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { ArrowRight, ArrowUpRight } from 'lucide-react';
+import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Section } from './section';
+
+type Program = { name: string; description: string };
+
+const PROGRAMS: Program[] = [
+  {
+    name: 'Bounties',
+    description: 'Complete tasks and earn rewards for your contributions.',
+  },
+  {
+    name: 'Hackathons',
+    description: 'Compete, collaborate, and bring new ideas to life.',
+  },
+  {
+    name: 'Crowdfunding',
+    description:
+      'Raise support directly from communities that believe in your vision.',
+  },
+  {
+    name: 'Grants',
+    description: 'Secure funding for impactful projects and initiatives.',
+  },
+];
+
+// Auto-advance interval for the desktop selector.
+const STEP_MS = 4000;
+
+/** Blank placeholder for a program's dashboard screenshot. */
+function DashboardCard({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        'w-full rounded-2xl border-2 border-white/10 bg-white/2',
+        className
+      )}
+    />
+  );
+}
+
+/** Title, description and arrow shown beneath a dashboard card. */
+function Caption({ program }: { program: Program }) {
+  return (
+    <div className='flex items-center gap-5 lg:pr-5'>
+      <div className='flex flex-1 flex-col gap-2'>
+        <h3 className='font-heading text-2xl font-semibold tracking-[-0.48px] text-white'>
+          {program.name}
+        </h3>
+        <p className='text-base leading-[1.45] text-text-muted'>
+          {program.description}
+        </p>
+      </div>
+      <ArrowUpRight
+        aria-hidden
+        strokeWidth={1.5}
+        className='size-9 shrink-0 text-white lg:size-10'
+      />
+    </div>
+  );
+}
+
+/**
+ * "Every Funding Path. One Platform.": a program selector (Bounties,
+ * Hackathons, Crowdfunding, Grants) beside a dashboard-screenshot card. On
+ * desktop the selector auto-advances and is clickable; on mobile every program
+ * stacks vertically.
+ */
+export function FundingPrograms() {
+  const [active, setActive] = useState(0);
+
+  // Re-scheduling on each change means a manual pick also resets the timer.
+  useEffect(() => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const id = setTimeout(
+      () => setActive(current => (current + 1) % PROGRAMS.length),
+      STEP_MS
+    );
+    return () => clearTimeout(id);
+  }, [active]);
+
+  return (
+    <Section
+      className='bg-ink bg-[linear-gradient(180deg,rgba(13,17,17,0)_48.68%,rgba(46,237,170,0.08)_100%)]'
+      innerClassName='flex flex-col gap-10 lg:flex-row lg:gap-16'
+    >
+      {/* Left: heading, CTA and the program selector (selector is desktop-only). */}
+      <div className='flex flex-col gap-10 lg:w-[412px] lg:shrink-0 lg:gap-[60px]'>
+        <div className='flex flex-col gap-5'>
+          <h2 className='font-heading text-3xl leading-none font-semibold tracking-tight text-white sm:text-4xl lg:text-5xl lg:tracking-[-1.92px]'>
+            Every Funding Path.
+            <span className='block text-primary'>One Platform.</span>
+          </h2>
+          <p className='text-base leading-[1.45] text-text-muted lg:text-xl lg:leading-[1.2] lg:tracking-[-0.4px]'>
+            Boundless unifies multiple ways to launch, support and fund projects
+            in a single accountable system.
+          </p>
+          <Link
+            href='/opportunities'
+            className='hidden items-center gap-2 self-start text-sm font-semibold text-primary transition-colors hover:text-primary-400 lg:inline-flex'
+          >
+            Get Started
+            <ArrowRight className='size-5' />
+          </Link>
+        </div>
+
+        <div className='hidden flex-col gap-5 lg:flex'>
+          {PROGRAMS.map((program, index) => {
+            const isActive = index === active;
+            return (
+              <button
+                key={program.name}
+                type='button'
+                onClick={() => setActive(index)}
+                aria-pressed={isActive}
+                className='flex cursor-pointer items-center gap-2 text-left'
+              >
+                <span
+                  className={cn(
+                    'h-6 w-0.5 shrink-0 rounded-full transition-colors',
+                    isActive ? 'bg-primary' : 'bg-transparent'
+                  )}
+                />
+                <span
+                  className={cn(
+                    'text-lg transition-colors',
+                    isActive ? 'font-bold text-white' : 'text-text-muted'
+                  )}
+                >
+                  {program.name}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Right (desktop): the active program's card + caption. */}
+      <div className='hidden flex-1 flex-col gap-5 lg:flex'>
+        <DashboardCard className='h-[480px]' />
+        <Caption program={PROGRAMS[active]} />
+      </div>
+
+      {/* Mobile: every program stacked. */}
+      <div className='flex flex-col gap-8 lg:hidden'>
+        {PROGRAMS.map((program, index) => (
+          <Fragment key={program.name}>
+            <div className='flex flex-col gap-5'>
+              <DashboardCard className='h-[360px]' />
+              <Caption program={program} />
+            </div>
+            {index < PROGRAMS.length - 1 ? (
+              <span aria-hidden className='h-px w-full bg-white/10' />
+            ) : null}
+          </Fragment>
+        ))}
+      </div>
+    </Section>
+  );
+}

src/features/marketing/components/testimonials.tsx

@@ -130,48 +130,49 @@ export function Testimonials() {
   return (
     <section className='hidden overflow-hidden bg-ink py-20 lg:block'>
       <div className='px-5 lg:px-[100px]'>
-        <div className='mx-auto flex w-full max-w-[1240px] items-start justify-between gap-8'>
-          <div className='flex flex-col gap-3'>
-            <h2 className='font-heading text-3xl leading-none font-semibold tracking-tight text-white sm:text-4xl lg:text-5xl lg:tracking-[-1.92px]'>
-              Trusted by{' '}
-              <span className='text-primary'>Builders Worldwide</span>
-            </h2>
-            <p className='max-w-md text-base leading-[1.45] text-text-muted'>
-              Hear how communities, founders and contributors are creating
-              impact through Boundless.
-            </p>
-          </div>
+        <div className='mx-auto w-full max-w-[1240px]'>
+          <div className='flex items-start justify-between gap-8'>
+            <div className='flex flex-col gap-3'>
+              <h2 className='font-heading text-3xl leading-none font-semibold tracking-tight text-white sm:text-4xl lg:text-5xl lg:tracking-[-1.92px]'>
+                Trusted by{' '}
+                <span className='text-primary'>Builders Worldwide</span>
+              </h2>
+              <p className='max-w-md text-base leading-[1.45] text-text-muted'>
+                Hear how communities, founders and contributors are creating
+                impact through Boundless.
+              </p>
+            </div>
 
-          {/* Liquid-glass CTA, scaled from a 282px reference to this ~44px
+            {/* 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. */}
-          <a
-            href='https://x.com/boundless_fi'
-            target='_blank'
-            rel='noreferrer'
-            className='relative inline-flex shrink-0 items-center justify-center gap-2 rounded-[60px] bg-[radial-gradient(80%_80%_at_15%_16%,rgba(255,255,255,0.14)_0%,rgba(255,255,255,0)_70%)] px-4 py-3 text-sm text-white shadow-[0px_5px_10px_0px_rgba(0,0,0,0.05),0px_15px_30px_0px_rgba(0,0,0,0.05),0px_30px_60px_0px_rgba(0,0,0,0.1),inset_4px_4px_1px_-4px_rgba(255,255,255,0.5),inset_3px_3px_2px_-3px_rgba(179,179,179,0.45),inset_-3px_-3px_2px_-3px_rgba(179,179,179,0.45),inset_0px_0px_24px_0px_rgba(242,242,242,0.08)] backdrop-blur-[10px]'
-          >
-            <span
-              aria-hidden
-              className='pointer-events-none absolute inset-0 rounded-[60px] bg-[linear-gradient(135deg,rgba(255,255,255,0.85)_0%,rgba(255,255,255,0)_42%,rgba(255,255,255,0)_58%,rgba(255,255,255,0.85)_100%)] mask-[linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] mask-exclude [mask-clip:content-box,border-box] p-px'
-            />
-            <SocialGlyph name='x' className='size-5' />
-            Follow Boundless
-            <ArrowUpRight className='size-5' strokeWidth={1.75} aria-hidden />
-          </a>
+            <a
+              href='https://x.com/boundless_fi'
+              target='_blank'
+              rel='noreferrer'
+              className='relative inline-flex shrink-0 items-center justify-center gap-2 rounded-[60px] bg-[radial-gradient(80%_80%_at_15%_16%,rgba(255,255,255,0.14)_0%,rgba(255,255,255,0)_70%)] px-4 py-3 text-sm text-white shadow-[0px_5px_10px_0px_rgba(0,0,0,0.05),0px_15px_30px_0px_rgba(0,0,0,0.05),0px_30px_60px_0px_rgba(0,0,0,0.1),inset_4px_4px_1px_-4px_rgba(255,255,255,0.5),inset_3px_3px_2px_-3px_rgba(179,179,179,0.45),inset_-3px_-3px_2px_-3px_rgba(179,179,179,0.45),inset_0px_0px_24px_0px_rgba(242,242,242,0.08)] backdrop-blur-[10px]'
+            >
+              <span
+                aria-hidden
+                className='pointer-events-none absolute inset-0 rounded-[60px] bg-[linear-gradient(135deg,rgba(255,255,255,0.85)_0%,rgba(255,255,255,0)_42%,rgba(255,255,255,0)_58%,rgba(255,255,255,0.85)_100%)] mask-[linear-gradient(#fff_0_0),linear-gradient(#fff_0_0)] mask-exclude [mask-clip:content-box,border-box] p-px'
+              />
+              <SocialGlyph name='x' className='size-5' />
+              Follow Boundless
+              <ArrowUpRight className='size-5' strokeWidth={1.75} aria-hidden />
+            </a>
+          </div>
+          {/* Marquee contained to the section width with a soft edge fade. */}
+          <div className='mt-14 flex flex-col gap-5 overflow-hidden mask-[linear-gradient(to_right,transparent,#000_7%,#000_93%,transparent)]'>
+            <Row items={ROW_ONE} direction='left' />
+            <Row items={ROW_TWO} direction='right' />
+          </div>
         </div>
       </div>
-
-      {/* Full-bleed marquee with a soft fade at both edges. */}
-      <div className='mt-14 flex flex-col gap-5 mask-[linear-gradient(to_right,transparent,#000_7%,#000_93%,transparent)]'>
-        <Row items={ROW_ONE} direction='left' />
-        <Row items={ROW_TWO} direction='right' />
-      </div>
     </section>
   );
 }

src/features/marketing/components/trust-bar.tsx

@@ -1,11 +1,20 @@
-import { Placeholder } from './placeholder';
+import { PartnerLogos } from './partner-logos';
 import { Section } from './section';
 
-/** Ecosystem trust strip. Plain scaffold pending design. */
+/**
+ * Ecosystem trust strip: a label over an auto-scrolling partner-logo marquee.
+ * The teal-at-top gradient continues the hero's bottom glow so the seam merges.
+ */
 export function TrustBar() {
   return (
-    <Section>
-      <Placeholder label='Trust Bar' />
+    <Section
+      className='bg-ink bg-[linear-gradient(180deg,rgba(46,237,170,0.08)_0%,rgba(13,17,17,0)_100%)]'
+      innerClassName='flex flex-col gap-8'
+    >
+      <p className='text-base font-semibold tracking-[-0.32px] text-[#939898] uppercase'>
+        Trusted By Communities, Ecosystems &amp; Builders
+      </p>
+      <PartnerLogos />
     </Section>
   );
 }

src/features/marketing/index.ts

@@ -35,6 +35,7 @@ export {
 export { FeatureListSection } from './components/feature-list-section';
 export { FourSteps } from './components/four-steps';
 export { FundingPaths } from './components/funding-paths';
+export { FundingPrograms } from './components/funding-programs';
 export { GetStartedModal } from './components/get-started-modal';
 export { default as HeroBackground } from './components/hero-background';
 export { HeroSection } from './components/hero-section';