Page Builder

Install shadcnblocks sections and implement i18n for a page.

Workflow

1. Install Sections - Install only NEW sections
   • Check if component file exists in

     components/

   • If exists: Skip installation, reuse existing component
   • If new: Run

     pnpm dlx shadcn add @shadcnblocks/[section]

   • Never overwrite existing files
2. Create Page File - Create/update app/[locale]/[route]/page.tsx
3. Import Sections - Import all installed components
4. Arrange Sections - Place in order as specified
5. Extract Text - Find all hardcoded text in sections
6. Add to i18n - Add text to messages/de.json and messages/en.json
7. Replace with t() - Use useTranslations hook in components

Installing Sections

Install each section in the order provided:

pnpm dlx shadcn add @shadcnblocks/hero145
pnpm dlx shadcn add @shadcnblocks/feature139
pnpm dlx shadcn add @shadcnblocks/pricing1

If sections are navbar or footer, ensure only one instance per project and add it in the layout if not already present.

Sections are installed to

components/

directory. Do not move components in subdirectories. Do not create custom components, only modify installed ones for i18n.

Preserving Existing Components

CRITICAL: Never overwrite existing components.

When

shadcn add

prompts about existing files, always choose to KEEP the existing version.

Protected Components (if they exist):

• components/ui/button.tsx

  - Custom button styles from /init

• components/ui/*.tsx

  - Any existing UI components

• components/*.tsx

  - Any existing block components

Installation Rule:

1. Before running

   pnpm dlx shadcn add

   , check if the component already exists
2. If component exists in

   components/

   , skip installation and reuse existing
3. Only install components that don't exist yet

Example:

# Check if hero145 exists
# If components/hero145.tsx exists → Skip, reuse existing
# If not → Install with: pnpm dlx shadcn add @shadcnblocks/hero145

Handling shadcn Prompts:

When shadcn asks about overwriting:

• Always select "No" / "Keep existing"
• Never overwrite custom-styled components

Reuse of Components

If a section is already installed from a previous page, do not reinstall. Simply import and use the existing component. Make it reusable across pages by ensuring no hardcoded text remains.

Page Structure

Add navbar and footer to layout if not already present. Everything else goes into the page file.

// app/[locale]/page.tsx (homepage)
// app/[locale]/leistungen/page.tsx (services)
// app/[locale]/kontakt/page.tsx (contact)

import { Hero145 } from '@/components/hero145'
import { Feature139 } from '@/components/feature139'

export default function Page() {
    return (
        <>
            <Hero145 />
            <Feature139 />
        </>
    )
}

i18n Implementation

1. Extract Text

Find all hardcoded strings in the section component.

2. Add to JSON files

// messages/de.json
{
	"hero": {
		"title": "Willkommen",
		"subtitle": "Beschreibung hier",
		"cta": "Jetzt starten"
	}
}

// messages/en.json
{
	"hero": {
		"title": "Welcome",
		"subtitle": "Description here",
		"cta": "Get Started"
	}
}

3. Use in Component

'use client'
import { useTranslations } from 'next-intl'

export function Hero145() {
    const t = useTranslations('hero')

    return (
        <section>
            <h1>{ t('title') }</h1>
            <p>{ t('subtitle') }</p>
            <button>{ t('cta') }</button>
        </section>
    )
}

Key Naming Convention

Use consistent key structure:

• {section}.title

• {section}.subtitle

• {section}.description

• {section}.cta

• {section}.items.0.title

• {section}.items.0.description

Links and Navigation

See

/internal-links

command for connecting buttons to pages and sections. See

/smooth-scroll

command for smooth scrolling setup.

Output

• Sections installed in components/
• Page created at app/[locale]/[route]/page.tsx
• Text added to messages/de.json
• Text added to messages/en.json
• Components using useTranslations