Component 2

# Component 2

You are given a task to integrate an existing React component in the codebase

~~~/README.md
# Logo Marquee

A seamless, infinite-scrolling marquee component designed for displaying partner or client logos. It features a gradient fade mask on the edges and automatically pauses animation on user hover.

## Dependencies

- React
- Tailwind CSS (standard configuration)

## Props

This component currently uses a static list of logos for demonstration. You can modify the `logos` array in `LogoMarquee.tsx` to accept a prop if dynamic content is required.

## Usage

```tsx
import LogoMarquee from '@/sd-components/logo-marquee';

export default function Page() {
  return (
    <div className="bg-black">
      <LogoMarquee />
    </div>
  );
}
```
~~~

~~~/src/App.tsx
import React from 'react';
import LogoMarquee from './LogoMarquee';

export default function App() {
  return (
    <main className="min-h-screen w-full bg-[#181a1b] flex items-center justify-center font-sans text-white">
      <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet" />
      <div className="w-full">
        <div className="max-w-7xl mx-auto mb-8 px-8">
          <h1 className="text-3xl font-bold font-outfit mb-2 text-[#e8e6e3]">Logo Marquee</h1>
          <p className="text-[#afa99e]">Infinite scrolling carousel with edge fading and pause-on-hover.</p>
        </div>
        <div className="border-y border-[#323638]">
          <LogoMarquee />
        </div>
      </div>
    </main>
  );
}
~~~

~~~/src/Icon1.tsx
import React from "react";

export const Icon1 = (props) => (
  <svg stroke="rgb(175, 169, 158)" fill="none" strokeWidth="2px" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg" className="[--darkreader-inline-stroke:currentColor] align-middle w-[18px] h-[18px] block overflow-x-hidden overflow-y-hidden fill-none stroke-[#afa99e] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#afa99e] [color-scheme:dark]" {...props}>
<path d="m15 18-6-6 6-6" className="inline fill-none stroke-[#afa99e] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#afa99e] [color-scheme:dark]"></path>
  </svg>
);
~~~

~~~/src/Icon2.tsx
import React from "react";

export const Icon2 = (props) => (
  <svg stroke="rgb(229, 227, 223)" fill="none" strokeWidth="2px" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg" className="[--darkreader-inline-stroke:currentColor] align-middle w-3.5 h-3.5 block overflow-x-hidden overflow-y-hidden fill-none stroke-[#e5e3df] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#e5e3df] [color-scheme:dark] select-none" {...props}>
<rect width="20" height="14" x="2" y="3" rx="2" className="w-5 h-3.5 inline fill-none stroke-[#e5e3df] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#e5e3df] [color-scheme:dark] select-none"></rect>
  </svg>
);
~~~

~~~/src/Icon3.tsx
import React from "react";

export const Icon3 = (props) => (
  <svg stroke="rgb(229, 227, 223)" fill="none" strokeWidth="2px" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg" className="[--darkreader-inline-stroke:currentColor] align-middle w-3.5 h-3.5 block overflow-x-hidden overflow-y-hidden fill-none stroke-[#e5e3df] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#e5e3df] [color-scheme:dark] select-none" {...props}>
<rect width="16" height="20" x="4" y="2" rx="2" ry="2" className="w-4 h-5 inline fill-none stroke-[#e5e3df] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#e5e3df] [color-scheme:dark] select-none"></rect>
  </svg>
);
~~~

~~~/src/Icon4.tsx
import React from "react";

export const Icon4 = (props) => (
  <svg stroke="rgb(229, 227, 223)" fill="none" strokeWidth="2px" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg" className="[--darkreader-inline-stroke:currentColor] align-middle w-3.5 h-3.5 block overflow-x-hidden overflow-y-hidden fill-none stroke-[#e5e3df] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#e5e3df] [color-scheme:dark] select-none" {...props}>
<rect width="14" height="20" x="5" y="2" rx="2" ry="2" className="w-3.5 h-5 inline fill-none stroke-[#e5e3df] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#e5e3df] [color-scheme:dark] select-none"></rect><path d="M12 18h.01" className="inline fill-none stroke-[#e5e3df] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#e5e3df] [color-scheme:dark] select-none"></path>
  </svg>
);
~~~

~~~/src/Icon5.tsx
import React from "react";

export const Icon5 = (props) => (
  <svg stroke="rgb(216, 213, 207)" fill="none" strokeWidth="2px" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg" className="[--darkreader-inline-stroke:currentColor] [text-wrap-mode:nowrap] align-middle w-5 h-5 block overflow-x-hidden overflow-y-hidden shrink-0 fill-none stroke-[#d8d5cf] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#d8d5cf] [color-scheme:dark] select-none" {...props}>
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" className="[text-wrap-mode:nowrap] w-[18px] h-[11px] inline fill-none stroke-[#d8d5cf] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#d8d5cf] [color-scheme:dark] select-none"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4" className="[text-wrap-mode:nowrap] inline fill-none stroke-[#d8d5cf] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#d8d5cf] [color-scheme:dark] select-none"></path>
  </svg>
);
~~~

~~~/src/Icon6.tsx
import React from "react";

export const Icon6 = (props) => (
  <svg stroke="rgb(216, 213, 207)" fill="none" strokeWidth="2px" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg" className="[--darkreader-inline-stroke:currentColor] text-[16.8px] [text-wrap-mode:nowrap] align-middle w-5 h-5 block overflow-x-hidden overflow-y-hidden shrink-0 fill-none stroke-[#d8d5cf] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#d8d5cf] [color-scheme:dark] select-none" {...props}>
<path d="M15 3h6v6" className="[text-wrap-mode:nowrap] inline fill-none stroke-[#d8d5cf] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#d8d5cf] [color-scheme:dark] select-none"></path><path d="M10 14 21 3" className="[text-wrap-mode:nowrap] inline fill-none stroke-[#d8d5cf] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#d8d5cf] [color-scheme:dark] select-none"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" className="[text-wrap-mode:nowrap] inline fill-none stroke-[#d8d5cf] stroke-[2px] [stroke-linecap:round] [stroke-linejoin:round] caret-[#d8d5cf] [color-scheme:dark] select-none"></path>
  </svg>
);
~~~

~~~/src/Icon7.tsx
import React from "react";

export const Icon7 = (props) => (
  <svg viewBox="0 0 168 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon8.tsx
import React from "react";

export const Icon8 = (props) => (
  <svg viewBox="0 0 167 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon9.tsx
import React from "react";

export const Icon9 = (props) => (
  <svg viewBox="0 0 170 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon10.tsx
import React from "react";

export const Icon10 = (props) => (
  <svg viewBox="0 0 153 38" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon11.tsx
import React from "react";

export const Icon11 = (props) => (
  <svg viewBox="0 0 170 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon12.tsx
import React from "react";

export const Icon12 = (props) => (
  <svg viewBox="0 0 161 44" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon13.tsx
import React from "react";

export const Icon13 = (props) => (
  <svg viewBox="0 0 168 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon14.tsx
import React from "react";

export const Icon14 = (props) => (
  <svg viewBox="0 0 167 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon15.tsx
import React from "react";

export const Icon15 = (props) => (
  <svg viewBox="0 0 170 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon16.tsx
import React from "react";

export const Icon16 = (props) => (
  <svg viewBox="0 0 153 38" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon17.tsx
import React from "react";

export const Icon17 = (props) => (
  <svg viewBox="0 0 170 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon18.tsx
import React from "react";

export const Icon18 = (props) => (
  <svg viewBox="0 0 161 44" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon19.tsx
import React from "react";

export const Icon19 = (props) => (
  <svg viewBox="0 0 161 44" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon20.tsx
import React from "react";

export const Icon20 = (props) => (
  <svg viewBox="0 0 170 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon21.tsx
import React from "react";

export const Icon21 = (props) => (
  <svg viewBox="0 0 153 38" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon22.tsx
import React from "react";

export const Icon22 = (props) => (
  <svg viewBox="0 0 170 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon23.tsx
import React from "react";

export const Icon23 = (props) => (
  <svg viewBox="0 0 167 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon24.tsx
import React from "react";

export const Icon24 = (props) => (
  <svg viewBox="0 0 168 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon25.tsx
import React from "react";

export const Icon25 = (props) => (
  <svg viewBox="0 0 161 44" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon26.tsx
import React from "react";

export const Icon26 = (props) => (
  <svg viewBox="0 0 170 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon27.tsx
import React from "react";

export const Icon27 = (props) => (
  <svg viewBox="0 0 153 38" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon28.tsx
import React from "react";

export const Icon28 = (props) => (
  <svg viewBox="0 0 170 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon29.tsx
import React from "react";

export const Icon29 = (props) => (
  <svg viewBox="0 0 167 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/Icon30.tsx
import React from "react";

export const Icon30 = (props) => (
  <svg viewBox="0 0 168 41" fill="currentColor" className="align-middle h-8 block overflow-x-hidden overflow-y-hidden fill-[#e5e3df] caret-[#e5e3df] [color-scheme:dark]" {...props}>

  </svg>
);
~~~

~~~/src/LogoMarquee.tsx
import React from 'react';
import { Icon7 } from './Icon7';
import { Icon8 } from './Icon8';
import { Icon9 } from './Icon9';
import { Icon10 } from './Icon10';
import { Icon11 } from './Icon11';
import { Icon12 } from './Icon12';

const logos = [
  { id: 1, name: 'Logo 1', icon: Icon7 },
  { id: 2, name: 'Logo 2', icon: Icon8 },
  { id: 3, name: 'Logo 3', icon: Icon9 },
  { id: 4, name: 'Logo 4', icon: Icon10 },
  { id: 5, name: 'Logo 5', icon: Icon11 },
  { id: 6, name: 'Logo 6', icon: Icon12 },
];

export default function LogoMarquee() {
  return (
    <section className="w-full bg-[#080808] py-20 overflow-hidden relative">
      <style>{`
        @keyframes marquee {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-50%);
          }
        }
        .animate-marquee {
          animation: marquee 30s linear infinite;
        }
        /* Mask for fading edges */
        .marquee-mask {
          mask-image: linear-gradient(
            to right,
            transparent,
            rgb(0, 0, 0) 10%,
            rgb(0, 0, 0) 90%,
            transparent
          );
        }
      `}</style>

      <div className="w-full max-w-[1440px] mx-auto px-4 md:px-8">
        <div className="flex flex-col gap-4">
          <div className="marquee-mask w-full overflow-hidden">
            {/* Marquee Track */}
            <div className="flex w-max animate-marquee hover:[animation-play-state:paused]">
              {/* First Set of Logos */}
              <div className="flex gap-4 pr-4">
                {logos.map((logo) => (
                  <LogoCard key={`set1-${logo.id}`} logo={logo} />
                ))}
              </div>
              {/* Second Set of Logos (Duplicate for seamless loop) */}
              <div className="flex gap-4 pr-4">
                {logos.map((logo) => (
                  <LogoCard key={`set2-${logo.id}`} logo={logo} />
                ))}
              </div>
              {/* Third Set of Logos (Extra buffer for wide screens) */}
              <div className="flex gap-4 pr-4">
                {logos.map((logo) => (
                  <LogoCard key={`set3-${logo.id}`} logo={logo} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function LogoCard({ logo }: { logo: { id: number; name: string; icon: React.ElementType } }) {
  const Icon = logo.icon;
  return (
    <div className="bg-[#0d0e0e] text-[#e5e3df] min-w-[200px] h-[100px] relative flex flex-col justify-center rounded-[6px] border border-[#7f7668] transition-all duration-300 hover:border-[#e5e3df] hover:shadow-[0_0_15px_rgba(255,255,255,0.05)] cursor-pointer group">
      <div className="flex items-center gap-4 px-6">
        <Icon className="w-8 h-8 fill-[#e5e3df] transition-transform duration-300 group-hover:scale-110" />
        <span className="text-lg font-semibold tracking-wide font-outfit select-none">
          {logo.name}
        </span>
      </div>
    </div>
  );
}
~~~

Implementation Guidelines

1. Analyze the component structure, styling, animation implementations
2. Review the component's arguments and state
3. Think through what is the best place to adopt this component/style into the design we are doing
4. Then adopt the component/design to our current system

Help me integrate this into my design