managarten/packages/shared-landing-ui/src/sections/MasonryGridSection.astro

---
/**
 * MasonryGridSection - Grid layout with variable sized cards
 *
 * Usage:
 * ```astro
 * <MasonryGridSection
 *   title="Why we do this"
 *   subtitle="Our guiding principles"
 *   items={[
 *     { number: '01', title: 'Technology for all', text: '...', size: 'large' },
 *     { number: '02', title: 'Transparent', text: '...', size: 'medium' }
 *   ]}
 * />
 * ```
 */

export interface MasonryItem {
	number?: string;
	title: string;
	text: string;
	size?: 'small' | 'medium' | 'large';
}

interface Props {
	title: string;
	subtitle?: string;
	items: MasonryItem[];
	class?: string;
}

const { title, subtitle, items, class: className = '' } = Astro.props;
---

<section class:list={['masonry-section', className]}>
	<div class="masonry-overlay"></div>

	<div class="masonry-container">
		<div class="masonry-header">
			<h2 class="masonry-main-title">{title}</h2>
			{subtitle && <p class="masonry-main-subtitle">{subtitle}</p>}
		</div>

		<div class="masonry-grid">
			{
				items.map((item) => (
					<div class={`masonry-item masonry-${item.size || 'medium'}`}>
						<div class="masonry-content">
							{item.number && <span class="masonry-number">{item.number}</span>}
							<h4 class="masonry-title">{item.title}</h4>
							<p class="masonry-text">{item.text}</p>
						</div>
					</div>
				))
			}
		</div>
	</div>
</section>

<style>
	.masonry-section {
		position: relative;
		background: linear-gradient(
			180deg,
			var(--color-background-page) 0%,
			var(--color-background-card) 100%
		);
		padding: 160px 0;
		overflow: hidden;
	}

	.masonry-overlay {
		position: absolute;
		inset: 0;
		background:
			radial-gradient(circle at 20% 30%, var(--color-primary-glow) 0%, transparent 50%),
			radial-gradient(circle at 80% 70%, var(--color-primary-glow) 0%, transparent 50%);
		opacity: 0.2;
		pointer-events: none;
	}

	.masonry-container {
		position: relative;
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 80px;
		z-index: 10;
	}

	.masonry-header {
		text-align: center;
		margin-bottom: 120px;
	}

	.masonry-main-title {
		font-size: clamp(2.5rem, 5vw, 3.5rem);
		font-weight: 800;
		color: var(--color-text-primary);
		margin: 0 0 20px 0;
		line-height: 1.1;
		letter-spacing: -0.02em;
	}

	.masonry-main-subtitle {
		font-size: clamp(1rem, 2vw, 1.25rem);
		color: var(--color-text-muted);
		margin: 0;
	}

	.masonry-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 30px;
		grid-auto-flow: dense;
	}

	.masonry-item {
		position: relative;
		transition: transform 0.3s ease;
	}

	.masonry-item:hover {
		transform: translateY(-4px);
	}

	.masonry-large {
		grid-column: span 2;
	}

	.masonry-medium {
		grid-column: span 1;
	}

	.masonry-small {
		grid-column: span 1;
	}

	.masonry-content {
		height: 100%;
		background: linear-gradient(
			135deg,
			var(--color-background-card) 0%,
			var(--color-background-page) 100%
		);
		border: 1px solid var(--color-primary-glow);
		border-radius: 20px;
		padding: 40px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
	}

	.masonry-item:hover .masonry-content {
		border-color: var(--color-primary);
		box-shadow: 0 8px 32px var(--color-primary-glow);
	}

	.masonry-number {
		font-size: 3rem;
		font-weight: 800;
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		line-height: 1;
		opacity: 0.3;
	}

	.masonry-title {
		font-size: 1.5rem;
		font-weight: 700;
		color: var(--color-text-primary);
		margin: 0;
		line-height: 1.3;
	}

	.masonry-text {
		font-size: 1rem;
		line-height: 1.6;
		color: var(--color-text-secondary);
		margin: 0;
	}

	@media (max-width: 768px) {
		.masonry-section {
			padding: 120px 0;
		}

		.masonry-container {
			padding: 0 40px;
		}

		.masonry-header {
			margin-bottom: 80px;
		}

		.masonry-large,
		.masonry-medium,
		.masonry-small {
			grid-column: span 1;
		}

		.masonry-content {
			padding: 30px;
		}
	}

	@media (max-width: 640px) {
		.masonry-section {
			padding: 80px 0;
		}

		.masonry-container {
			padding: 0 24px;
		}

		.masonry-grid {
			grid-template-columns: 1fr;
		}

		.masonry-content {
			padding: 24px;
		}

		.masonry-number {
			font-size: 2.5rem;
		}

		.masonry-title {
			font-size: 1.25rem;
		}
	}
</style>