refactor: Partners page extraction + Phase 2 specs

components/atoms/form-field.tsx

@@ -0,0 +1,29 @@
+import type React from 'react';
+import { vstack } from 'styled-system/patterns';
+import { Text } from './text';
+
+interface FormFieldProps {
+	label: string;
+	required?: boolean;
+	children: React.ReactNode;
+	className?: string;
+}
+
+export function FormField({
+	label,
+	required = false,
+	children,
+	className = '',
+}: FormFieldProps) {
+	return (
+		<div
+			className={`${vstack({ gap: '2', alignItems: 'stretch' })} ${className}`}
+		>
+			<Text as="label" variant="label" color="muted-light">
+				{label}
+				{required && '*'}
+			</Text>
+			{children}
+		</div>
+	);
+}

components/atoms/icon-box.tsx

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { IconBoxVariantProps } from 'styled-system/recipes';
+import { iconBox } from 'styled-system/recipes';
+
+interface IconBoxProps extends IconBoxVariantProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export function IconBox({
+	size,
+	variant,
+	color,
+	children,
+	className = '',
+}: IconBoxProps) {
+	const recipeClasses = iconBox({ size, variant, color });
+	const classes = className ? `${recipeClasses} ${className}` : recipeClasses;
+
+	return <div className={classes}>{children}</div>;
+}

components/atoms/text.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+import type { TextVariantProps } from 'styled-system/recipes';
+import { text } from 'styled-system/recipes';
+
+type TextElement = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'label';
+
+interface TextProps extends TextVariantProps {
+	as?: TextElement;
+	children: React.ReactNode;
+	className?: string;
+	htmlFor?: string;
+}
+
+export function Text({
+	as: Component = 'p',
+	variant,
+	color,
+	children,
+	className = '',
+	htmlFor,
+}: TextProps) {
+	const recipeClasses = text({ variant, color });
+	const classes = className ? `${recipeClasses} ${className}` : recipeClasses;
+
+	return (
+		<Component className={classes} htmlFor={htmlFor}>
+			{children}
+		</Component>
+	);
+}

components/sections/partners/cta-section.tsx

@@ -1,6 +1,8 @@
 import { css } from 'styled-system/css';
 import { flex } from 'styled-system/patterns';
 import { Button } from '../../atoms/Button';
+import { Text } from '../../atoms/text';
+import { Container } from '../../organisms/Container';
 
 export function CtaSection() {
 	return (
@@ -13,29 +15,25 @@ export function CtaSection() {
 				overflow: 'hidden',
 			})}
 		>
-			<div
+			<Container
+				narrow
 				className={css({
-					maxW: '4xl',
-					mx: 'auto',
-					px: '4',
 					textAlign: 'center',
 					position: 'relative',
 					zIndex: 10,
 				})}
 			>
-				<h2
+				<Text
+					as="h2"
+					variant="display-xl"
+					color="dark"
 					className={css({
-						fontFamily: 'display',
-						fontSize: { base: '5xl', md: '6xl' },
-						fontWeight: 'black',
-						color: 'ocobo.dark',
 						mb: '10',
 						lineHeight: '0.9',
-						letterSpacing: 'tight',
 					})}
 				>
 					Besoin d'un architecte pour votre stack ?
-				</h2>
+				</Text>
 				<p
 					className={css({
 						fontSize: 'xl',
@@ -52,7 +50,7 @@ export function CtaSection() {
 						Prendre RDV
 					</Button>
 				</div>
-			</div>
+			</Container>
 		</section>
 	);
 }

components/sections/partners/ecosystem-section.tsx

@@ -7,7 +7,7 @@ import {
 	type PartnerCategory,
 	partners,
 } from '../../../data/partners-data';
-import { PartnerCard } from './partner-card';
+import { PartnerCardFromData } from './partner-card';
 
 function filterPartners(filter: 'TOUS' | PartnerCategory): Partner[] {
 	const filtered =
@@ -106,7 +106,7 @@ export function EcosystemSection() {
 					className={`${grid({ columns: { base: 1, md: 2, lg: 3 }, gap: '8' })} ${css({ transition: 'all', transitionDuration: '500ms' })}`}
 				>
 					{filtered.map((partner) => (
-						<PartnerCard
+						<PartnerCardFromData
 							key={`${partner.name}-${filter}`}
 							partner={partner}
 							animate={animate}

components/sections/partners/hero-section.tsx

@@ -3,104 +3,94 @@ import { css } from 'styled-system/css';
 import { flex } from 'styled-system/patterns';
 import { Badge } from '../../atoms/Badge';
 import { Button } from '../../atoms/Button';
+import { Text } from '../../atoms/text';
 import {
 	DEFAULT_STACK_ITEMS,
 	ModularStackGrid,
 } from '../../layout/ModularStackGrid';
+import { Container } from '../../organisms/Container';
 
 export function HeroSection() {
 	return (
 		<section
 			className={css({
 				pt: '40',
 				pb: '24',
-				maxW: '7xl',
-				mx: 'auto',
-				px: { base: '4', sm: '6', lg: '8' },
 				position: 'relative',
 				textAlign: 'center',
 			})}
 		>
-			<div
-				className={css({
-					maxW: '4xl',
-					mx: 'auto',
-					mb: '16',
-					position: 'relative',
-					zIndex: 10,
-				})}
-			>
-				<Badge variant="sky" className={css({ mb: '10' })}>
-					TECHNOLOGIE
-				</Badge>
-
-				<h1
-					className={css({
-						fontFamily: 'display',
-						fontSize: { base: '5xl', md: '6xl' },
-						fontWeight: 'bold',
-						color: 'ocobo.dark',
-						mb: '10',
-						lineHeight: '0.95',
-						letterSpacing: 'tight',
-					})}
-				>
-					Un écosystème <br />
-					de solutions{' '}
-					<span className={css({ color: 'ocobo.sky', fontStyle: 'italic' })}>
-						connectées.
-					</span>
-				</h1>
-
-				<p
+			<Container>
+				<div
 					className={css({
-						fontSize: 'xl',
-						color: 'gray.700',
-						mb: '12',
-						lineHeight: 'relaxed',
-						fontWeight: 'medium',
-						maxW: '2xl',
+						maxW: '4xl',
 						mx: 'auto',
+						mb: '16',
+						position: 'relative',
+						zIndex: 10,
 					})}
 				>
-					Nous maîtrisons les architectures technologiques les plus avancées
-					pour transformer vos outils en{' '}
-					<span className={css({ fontWeight: 'bold' })}>
-						véritable levier de croissance.
-					</span>
-				</p>
-			</div>
+					<Badge variant="sky" className={css({ mb: '10' })}>
+						TECHNOLOGIE
+					</Badge>
 
-			<div
-				className={`${flex({ justify: 'center' })} ${css({
-					mb: '16',
-					px: '4',
-				})}`}
-			>
-				<ModularStackGrid items={DEFAULT_STACK_ITEMS} maxWidth="xl" animated />
-			</div>
+					<Text as="h1" variant="display-xl" className={css({ mb: '10' })}>
+						Un écosystème <br />
+						de solutions{' '}
+						<span className={css({ color: 'ocobo.sky', fontStyle: 'italic' })}>
+							connectées.
+						</span>
+					</Text>
 
-			<div
-				className={flex({ direction: 'column', gap: '12', align: 'center' })}
-			>
-				<Button variant="cta" size="xl" to="/contact">
-					Auditer ma stack
-				</Button>
-			</div>
+					<Text
+						as="p"
+						variant="subtitle"
+						color="muted"
+						className={css({ maxW: '2xl', mx: 'auto', mb: '12' })}
+					>
+						Nous maîtrisons les architectures technologiques les plus avancées
+						pour transformer vos outils en{' '}
+						<span className={css({ fontWeight: 'bold' })}>
+							véritable levier de croissance.
+						</span>
+					</Text>
+				</div>
 
-			<div
-				className={`${flex({ justify: 'center' })} ${css({
-					mt: '16',
-					w: 'full',
-					animation: 'bounce-slow',
-				})}`}
-			>
-				<ChevronDown
-					className={css({ color: 'ocobo.sky' })}
-					size={24}
-					strokeWidth={1.5}
-				/>
-			</div>
+				<div
+					className={`${flex({ justify: 'center' })} ${css({
+						mb: '16',
+						px: '4',
+					})}`}
+				>
+					<ModularStackGrid
+						items={DEFAULT_STACK_ITEMS}
+						maxWidth="xl"
+						animated
+					/>
+				</div>
+
+				<div
+					className={flex({ direction: 'column', gap: '12', align: 'center' })}
+				>
+					<Button variant="cta" size="xl" to="/contact">
+						Auditer ma stack
+					</Button>
+				</div>
+
+				<div
+					className={`${flex({ justify: 'center' })} ${css({
+						mt: '16',
+						w: 'full',
+						animation: 'bounce-slow',
+					})}`}
+				>
+					<ChevronDown
+						className={css({ color: 'ocobo.sky' })}
+						size={24}
+						strokeWidth={1.5}
+					/>
+				</div>
+			</Container>
 		</section>
 	);
 }