Match Home, top nav, hero, and logo wall to the current marketing frames.
Puts Workshops in the header, pairs the hero with a static rule card and breakpoint CTAs, and shows the three pilot marks with no wall label. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
e12e06f7ce
commit
33cdaf135c
47 files changed
+728
-527
No files matched your search
@@ -7,49 +7,17 @@ export default {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component: `A responsive logo wall component that displays partner/sponsor logos in a grid layout. Features responsive breakpoints with different layouts and sizing for mobile, tablet, and desktop views.
|
||||
component: `Home Logo Wall: three pilot marks (Boulder Street Medics, Food Not Bombs, Mutual Aid Colorado) with no heading.
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
- **Mobile**: 3 rows × 2 columns grid with 38.4px gaps
|
||||
- **SM**: 2 rows × 3 columns grid with 38.4px gaps
|
||||
- **MD+**: Single space-between row (no wrap)
|
||||
- **LG**: 1.25× logo sizes, 48px gaps, 64px horizontal padding
|
||||
- **XL**: 1.5625× logo sizes, 48px gaps, 160px horizontal padding
|
||||
|
||||
## Animations & Transitions
|
||||
|
||||
- **Opacity**: Partner logos render at 60% opacity to match Figma \`Section / Logo Wall\`.
|
||||
- **Mobile**: stacked column
|
||||
- **SM+**: wrapping row
|
||||
- **MD+**: single space-between row
|
||||
|
||||
## Props
|
||||
|
||||
- **logos** (optional): Array of logo objects with src, alt, and size properties. If not provided, uses default partner logos.
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Custom Logos
|
||||
\`\`\`jsx
|
||||
<LogoWall
|
||||
logos={[
|
||||
{
|
||||
src: "assets/logos/partners/cu-boulder.svg",
|
||||
alt: "CU Boulder",
|
||||
size: "h-10 lg:h-12 xl:h-[60px]",
|
||||
},
|
||||
{
|
||||
src: "assets/logos/partners/food-not-bombs.svg",
|
||||
alt: "Food Not Bombs",
|
||||
size: "h-11 lg:h-14 xl:h-[70px]",
|
||||
}
|
||||
]}
|
||||
/>
|
||||
\`\`\`
|
||||
|
||||
### Empty State
|
||||
\`\`\`jsx
|
||||
<LogoWall logos={[]} />
|
||||
\`\`\`
|
||||
This will fall back to the default partner logos.`,
|
||||
- **logos** (optional): Array of logo objects with src, alt, and size properties. If not provided, uses the three pilot marks.`,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -58,7 +26,7 @@ This will fall back to the default partner logos.`,
|
||||
logos: {
|
||||
control: "object",
|
||||
description:
|
||||
"Array of logo objects with src, alt, and size properties. If not provided, uses default partner logos.",
|
||||
"Array of logo objects with src, alt, and size properties. If not provided, uses the three pilot marks.",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -69,7 +37,7 @@ export const Default = {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Default LogoWall with all partner logos. Displays in a 2×3 grid on mobile, 3×2 grid from 430px, and a space-between row from 640px with Figma lockup sizes. Logos render at 60% opacity to match Figma.",
|
||||
"Default LogoWall with the three pilot marks at Figma 60% opacity.",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in new issue
Block a user