feat: Introduce component and standardized spacing utilities, then refactor and to use them.

src/components/common/MarketplaceSection.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const marketplaceSectionVariants = cva('w-full', {
+	variants: {
+		spacing: {
+			compact: 'marketplace-section-compact',
+			default: 'marketplace-section',
+			relaxed: 'marketplace-section-relaxed',
+			major: 'marketplace-section-major',
+			none: 'my-0',
+		},
+		container: {
+			default: 'mx-auto max-w-7xl',
+			full: 'w-full',
+			none: '',
+		},
+	},
+	defaultVariants: {
+		spacing: 'default',
+		container: 'none',
+	},
+});
+
+interface MarketplaceSectionProps
+	extends React.HTMLAttributes<HTMLElement>,
+		VariantProps<typeof marketplaceSectionVariants> {
+	as?: 'section' | 'div' | 'header' | 'footer';
+}
+
+const MarketplaceSection: React.FC<MarketplaceSectionProps> = ({
+	children,
+	spacing,
+	container,
+	className,
+	as: Tag = 'section',
+	...props
+}) => {
+	return (
+		<Tag
+			className={cn(
+				marketplaceSectionVariants({ spacing, container }),
+				className
+			)}
+			{...props}
+		>
+			{children}
+		</Tag>
+	);
+};
+
+export default MarketplaceSection;

src/components/common/SectionDivider.tsx

@@ -9,9 +9,9 @@ interface SectionDividerProps {
 }
 
 const spacingClasses: Record<SectionDividerSpacing, string> = {
-  compact: 'my-4 md:my-5',
-  default: 'my-6 md:my-8',
-  relaxed: 'my-8 md:my-12',
+  compact: 'marketplace-section-compact',
+  default: 'marketplace-section',
+  relaxed: 'marketplace-section-relaxed',
 };
 
 function SectionDivider({ title, spacing = 'default', className }: SectionDividerProps) {

src/index.css

@@ -49,6 +49,10 @@
 	--font-manrope: 'Manrope', sans-serif;
 	--font-inter: 'Inter', sans-serif;
 	--font-jakarta: 'Plus Jakarta Sans', sans-serif;
+	--spacing-section-compact: clamp(1rem, 4vh, 1.25rem);
+	--spacing-section-default: clamp(1.5rem, 6vh, 2rem);
+	--spacing-section-relaxed: clamp(2rem, 8vh, 3rem);
+	--spacing-section-major: clamp(3rem, 12vh, 4rem);
 }
 
 :root {
@@ -128,3 +132,25 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+@layer components {
+	.marketplace-section {
+		margin-top: var(--spacing-section-default);
+		margin-bottom: var(--spacing-section-default);
+	}
+
+	.marketplace-section-compact {
+		margin-top: var(--spacing-section-compact);
+		margin-bottom: var(--spacing-section-compact);
+	}
+
+	.marketplace-section-relaxed {
+		margin-top: var(--spacing-section-relaxed);
+		margin-bottom: var(--spacing-section-relaxed);
+	}
+
+	.marketplace-section-major {
+		margin-top: var(--spacing-section-major);
+		margin-bottom: var(--spacing-section-major);
+	}
+}

src/pages/LandingPage.tsx

@@ -12,6 +12,7 @@ import SectionHeading from '@/components/common/SectionHeading';
 import CompactSectionSubtitle from '@/components/common/CompactSectionSubtitle';
 import CreatorProfileInfoGrid from '@/components/common/CreatorProfileInfoGrid';
 import MiniStatChip from '@/components/common/MiniStatChip';
+import MarketplaceSection from '@/components/common/MarketplaceSection';
 
 const FEATURED_CREATOR_FACTS = [
 	{ label: 'Membership', value: 'Collectors Circle' },
@@ -152,7 +153,7 @@ function LandingPage() {
 			<div className="absolute bottom-[8%] right-[-3rem] size-72 rounded-full bg-emerald-300/15 blur-[100px]" />
 			<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,186,73,0.1),transparent_40%),radial-gradient(circle_at_bottom_left,rgba(74,222,128,0.08),transparent_35%)]" />
 			<div className="relative z-10 mx-auto max-w-7xl">
-				<header className="mb-16 text-center">
+				<MarketplaceSection as="header" spacing="major" className="text-center">
 					<img
 						className="mx-auto mb-8 size-10"
 						src="/icons/logo.svg"
@@ -164,15 +165,15 @@ function LandingPage() {
 					<h1 className="mb-8 font-grotesque text-[clamp(2.5rem,8vw,5rem)] font-extrabold leading-[1.1] tracking-tight text-white">
 						Access Layer
 					</h1>
-					<div className="mb-8 flex justify-center">
+					<div className="flex justify-center">
 						<UnavailableAction
 							disabled={true}
 							reason="Feature coming soon"
 						>
 							<Button>Buy Access</Button>
 						</UnavailableAction>
 					</div>
-				</header>
+				</MarketplaceSection>
 
 				<SectionDivider title="Discover creators" spacing="relaxed" />
 
@@ -192,7 +193,7 @@ function LandingPage() {
 
 				<SectionDivider title="Marketplace results" spacing="default" />
 
-				<section className="mt-2">
+				<MarketplaceSection>
 					<SectionHeading
 						title="Explore creators"
 						supportingText="Discover creator profiles and marketplace listings."
@@ -218,11 +219,14 @@ function LandingPage() {
 							/>
 						</div>
 					)}
-				</section>
+				</MarketplaceSection>
 
 				<SectionDivider title="Creator profile pattern" spacing="relaxed" />
 
-				<section className="grid gap-8 rounded-[2rem] border border-white/10 bg-white/[0.045] p-6 shadow-[0_24px_80px_-60px_rgba(8,17,31,0.95)] backdrop-blur-sm md:p-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-start">
+				<MarketplaceSection
+					spacing="relaxed"
+					className="grid gap-8 rounded-[2rem] border border-white/10 bg-white/[0.045] p-6 shadow-[0_24px_80px_-60px_rgba(8,17,31,0.95)] backdrop-blur-sm md:p-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-start"
+				>
 					<div>
 						<SectionHeading
 							eyebrow="Profile spotlight"
@@ -241,7 +245,7 @@ function LandingPage() {
 						</div>
 					</div>
 					<CreatorProfileInfoGrid items={FEATURED_CREATOR_FACTS} />
-				</section>
+				</MarketplaceSection>
 			</div>
 		</main>
 	);