```
### Section Layout Pattern
```typescript
// components/organisms/Section.tsx
import { cn } from '@/lib/utils'
import { type ReactNode } from 'react'
interface SectionProps {
children: ReactNode
className?: string
background?: 'white' | 'neutral' | 'secondary' | 'primary-light'
id?: string
}
export function Section({ children, className, background = 'white', id }: SectionProps) {
const bgClasses = {
white: 'bg-white',
neutral: 'bg-neutral-50',
secondary: 'bg-secondary',
'primary-light':'bg-primary-light',
}
return (
)
}
```
### Touch Target Rule
```typescript
// All clickable elements must meet 44×44px minimum
// In Tailwind: min-h-[44px] min-w-[44px]
// WhatsApp floating button
{/* WhatsApp SVG icon */}
```
---
## Step 7 — Performance Patterns
### Font Loading (Zero Layout Shift)
```typescript
// app/layout.tsx
import { Cormorant_Garamond, Inter } from 'next/font/google'
const cormorant = Cormorant_Garamond({
subsets: ['latin', 'cyrillic'],
weight: ['400', '500', '600', '700'],
variable: '--font-heading',
display: 'swap', // Shows fallback font while loading
})
const inter = Inter({
subsets: ['latin', 'cyrillic'],
variable: '--font-body',
display: 'swap',
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
### Metadata (SEO — every page)
```typescript
// app/services/page.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Услуги и цены — Pink Beauty | Маникюр, Педикюр, Наращивание в Астане',
description: 'Полный прайс-лист Pink Beauty: маникюр от 3000₸, педикюр, наращивание ногтей. Прозрачные цены, профессиональные мастера. Онлайн-запись.',
openGraph: {
title: 'Услуги Pink Beauty — Астана',
description: 'Маникюр, педикюр, наращивание. Цены от 3000₸.',
images: [{ url: '/og-services.jpg', width: 1200, height: 630 }],
locale: 'ru_KZ',
type: 'website',
},
}
```
### Schema.org (Local SEO)
```typescript
// components/organisms/SchemaMarkup.tsx
// Place in root layout for site-wide schema + individual pages for specific
export function SalonSchema() {
const schema = {
'@context': 'https://schema.org',
'@type': 'BeautySalon',
name: 'Pink Beauty',
url: 'https://pinkbeauty.kz',
telephone: '+77XXXXXXXXX',
image: 'https://pinkbeauty.kz/og-image.jpg',
priceRange: '₸₸',
aggregateRating: {
'@type': 'AggregateRating',
ratingValue: '4.6',
reviewCount: '662',
},
address: {
'@type': 'PostalAddress',
streetAddress: 'просп. Кабанбай батыра 58Б/5',
addressLocality: 'Астана',
addressCountry: 'KZ',
},
openingHoursSpecification: {
'@type': 'OpeningHoursSpecification',
dayOfWeek: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
opens: '09:00',
closes: '21:00',
},
}
return (
)
}
```
### Scroll Reveal Hook (Performance-safe)
```typescript
// hooks/useScrollReveal.ts
'use client'
import { useEffect, useRef } from 'react'
export function useScrollReveal(threshold = 0.1) {
const ref = useRef
(null)
useEffect(() => {
const el = ref.current
if (!el) return
// Respect prefers-reduced-motion
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
el.style.opacity = '1'
return
}
el.style.opacity = '0'
el.style.transform = 'translateY(20px)'
el.style.transition = 'opacity 400ms ease-out, transform 400ms ease-out'
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
el.style.opacity = '1'
el.style.transform = 'translateY(0)'
observer.disconnect() // Run once
}
},
{ threshold }
)
observer.observe(el)
return () => observer.disconnect()
}, [threshold])
return ref
}
// Usage:
// const ref = useScrollReveal()
// ...
```
### Stagger animation for grids
```typescript
// Apply delay via inline style to each card
{services.map((service, index) => (
))}
```
---
## Step 8 — Bug Prevention Checklist
Run through this before committing any component or page.
### TypeScript
- [ ] Every prop has a type (no `any`)
- [ ] Optional props marked with `?` and have defaults
- [ ] API response types defined in `lib/sanity/types.ts`
- [ ] No `as unknown as SomeType` casts — fix the type properly
### Hydration (Next.js specific)
- [ ] No `Math.random()`, `Date.now()`, or `new Date()` in render without `suppressHydrationWarning`
- [ ] No browser-only APIs (`window`, `document`, `localStorage`) at module level — wrap in `useEffect`
- [ ] No conditional rendering based on `typeof window !== 'undefined'` in JSX — use a mounted state
```typescript
// ✅ CORRECT — handle window safely
'use client'
import { useState, useEffect } from 'react'
function ClientOnly({ children }: { children: React.ReactNode }) {
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return null
return <>{children}
}
```
### Images
- [ ] Every `` has a descriptive `alt` attribute (in Russian)
- [ ] Decorative images have `alt=""`
- [ ] Hero/above-fold image has `priority` prop
- [ ] All other images have `loading="lazy"` (default, don't need to add)
- [ ] `sizes` prop matches the actual rendered size
### Accessibility
- [ ] One `