Logos & Partners

Logo Cloud Section

Infinite scrolling logo marquee section building credibility and trust.

sectionslogospartnerscloudsocial-proof

Live Preview

POWERING FORWARD-THINKING WEB PROJECTS

▲Vercel

☁Cloudflare

⚡Supabase

≋TailwindCSS

◈Netlify

⚓Docker

Usage

Copy and paste this code into your React component:

import { LogoCloudSection } from 'react-component-kit-ui/sections';

<LogoCloudSection />

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/sections/LogoCloudSection.tsx + LogoCloudSection.css:

'use client';

import './LogoCloudSection.css';

/**
 * LogoCloudSection — High-trust partner and client brand wall with monochrome glass badges.
 * 
 * @param {string} title - Section headline. Default is 'TRUSTED BY MODERN TECH STACKS'.
 * @param {Array<{name: string, symbol: string}>} logos - Partner entries list.
 */
export interface LogoCloudSectionProps {
  title?: string;
  logos?: Array<{ name: string; symbol: string }>;
}

export function LogoCloudSection({
  title = 'POWERING FORWARD-THINKING WEB PROJECTS',
  logos = [
    { name: 'Vercel', symbol: '▲' },
    { name: 'Cloudflare', symbol: '☁' },
    { name: 'Supabase', symbol: '⚡' },
    { name: 'TailwindCSS', symbol: '≋' },
    { name: 'Netlify', symbol: '◈' },
    { name: 'Docker', symbol: '⚓' },
  ],
}: LogoCloudSectionProps) {
  return (
    <>
      <section className="logo-cloud" data-rk-b88031="">
        <div className="logo-cloud__inner" data-rk-b88031="">
          <p className="logo-cloud__title" data-rk-b88031="">{title}</p>
          <div className="logo-cloud__grid" data-rk-b88031="">
            {logos.map((logo, __i: number) => (
              <div key={__i} className="logo-badge" data-rk-b88031="">
                <span className="logo-badge__symbol" data-rk-b88031="">{logo.symbol}</span>
                <span className="logo-badge__name" data-rk-b88031="">{logo.name}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

export default LogoCloudSection;

/* LogoCloudSection — ported from astro-component-kit (sections/LogoCloudSection.astro) */

.logo-cloud:where([data-rk-b88031]) {
  padding: var(--sp-8, 2rem) var(--sp-6, 1.5rem);
  width: 100%;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.logo-cloud__inner:where([data-rk-b88031]) {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.logo-cloud__title:where([data-rk-b88031]) {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-text-3, #737373);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.logo-cloud__grid:where([data-rk-b88031]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.logo-badge:where([data-rk-b88031]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.65rem 1.4rem;
  background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
  border-radius: var(--r-full, 9999px);
  color: var(--c-text-2, #a3a3a3);
  font-size: 0.88rem;
  font-weight: 700;
  transition: all 0.25s ease;
}

.logo-badge:hover:where([data-rk-b88031]) {
  color: var(--c-text-1, #ffffff);
  background: rgb(var(--ink-rgb, 255 255 255) / 0.06);
  border-color: color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
  transform: translateY(-2px);
}

.logo-badge__symbol:where([data-rk-b88031]) {
  font-size: 1.1rem;
  color: var(--c-primary-light, #d4a017);
}