Elemente v2 - AI Outreach Platform Development

Build a NextJS-based AI outreach platform with marketing website and admin dashboard in a monorepo structure using TypeScript, Tailwind CSS, Shadcn UI, and Tailark components.

Code Standards

TypeScript & React Best Practices

1. Use TypeScript for all files with `.tsx` or `.ts` extensions

2. Write functional components with hooks exclusively

3. Define proper TypeScript interfaces for all component props

4. Export reusable types and interfaces from components

5. Apply `const` assertions to readonly objects for type safety

Component Architecture Patterns

1. Implement the HeroWrapper pattern for flexible, prop-based hero sections with variants (default, simple, minimal)

2. Favor composition over inheritance for component design

3. Create reusable components with clear, well-documented prop interfaces

4. Use content configuration objects for managing page-specific data

5. Support multiple styling variants for flexibility across pages

Styling & UI Implementation

1. Use Tailwind CSS utility classes for all styling

2. Follow responsive-first design approach: mobile → tablet → desktop

3. Build upon Shadcn UI components as the base component layer

4. Implement comprehensive dark mode support with CSS variables

5. Use CSS custom properties for consistent theming across the application

File Organization Structure

Follow this directory structure:

```

website/src/

├── app/ # NextJS app router pages

├── components/

│ ├── ui/ # Shadcn base components

│ ├── blocks/ # Tailark components

│ ├── hero-wrapper.tsx # Flexible hero system

│ └── site-header.tsx # Shared header

├── config/ # Site configuration

├── lib/ # Utilities and content

└── tailark-core/ # Tailark component system

```

Content Management System

1. Use structured content objects with TypeScript interfaces for type safety

2. Centralize site-wide configuration in `config/site.config.ts`

3. Define page-specific content within respective page files

4. Implement prop-based content system for maximum reusability

Navigation & Header Guidelines

1. Use single header approach - avoid double headers

2. Integrate navigation directly into hero sections

3. Maintain consistent branding with "Elemente" and custom logo

4. Ensure mobile-responsive navigation with hamburger menu

Performance & SEO Requirements

1. Implement comprehensive meta tags for SEO optimization

2. Use Next.js Image component for automatic optimization

3. Enable SVG support with `dangerouslyAllowSVG: true` configuration

4. Lazy load components where appropriate to reduce initial bundle size

5. Monitor and optimize Core Web Vitals metrics

AI Outreach Platform Specifics

Brand Guidelines

1. Primary brand identity: "Elemente - AI-Driven Outreach That Converts"

2. Focus messaging on conversion rates, automation capabilities, and AI personalization

3. Target audiences: Sales teams, marketing professionals, agencies

4. Emphasize value propositions: AI personalization, multi-channel outreach, workflow automation

Content Strategy

1. Lead with results and measurable metrics (e.g., "300% conversion increase")

2. Incorporate social proof through customer testimonials and case studies

3. Present clear pricing tiers: Starter ($49), Professional ($149), Enterprise (custom)

4. Offer free trial with no credit card required to reduce friction

5. Use benefits-focused copy in feature showcases

Component Patterns

1. Implement hero variants for different page contexts:

- **default**: Full-featured hero with images and CTAs

- **simple**: Clean layout with essential elements

- **minimal**: Text-focused for content-heavy pages

2. Integrate strategic CTAs in footers and key conversion points

3. Create feature showcases that emphasize user benefits

4. Build stats sections highlighting impressive platform metrics

External Integrations

1. Support motion/framer-motion for engaging animations

2. Integrate Tailark component library for advanced UI patterns

3. Enable multi-channel messaging: Email, LinkedIn, phone

4. Implement analytics and conversion tracking systems

Development Workflow

Follow these steps for consistent development:

1. **Start with strategy**: Define content strategy and user needs first

2. **Use HeroWrapper**: Implement consistent page headers using the HeroWrapper pattern

3. **Mobile-first approach**: Build for mobile, then progressively enhance for desktop

4. **Test responsiveness**: Verify design across all breakpoints (sm, md, lg, xl, 2xl)

5. **Optimize performance**: Focus on Core Web Vitals optimization

6. **Error handling**: Implement proper error boundaries and loading states

Performance Guidelines

1. Monitor and control bundle size - avoid unnecessary dependencies

2. Use dynamic imports for large or conditionally-rendered components

3. Optimize images: use WebP/AVIF formats, proper sizing, lazy loading

4. Gradually enable TypeScript strict mode for improved type safety

5. Track build times and optimize compilation when needed

6. Implement code splitting at route level

Code Review Checklist

Before committing code, verify:

Git & Version Control

1. Write meaningful, descriptive commit messages

2. Ignore build artifacts: `.next/`, `dist/`, `node_modules/`

3. Remove large files before committing to keep repository lean

4. Use semantic versioning (MAJOR.MINOR.PATCH) for releases

5. Create feature branches for new development work

Constraints