Elemente v2 AI Outreach Platform Development
Development skill for building and maintaining the Elemente v2 AI-driven outreach platform. This NextJS-based marketing website features a sophisticated HeroWrapper system, integrated Tailark components, and conversion-focused design patterns.
Project Architecture
This is a NextJS monorepo with TypeScript, Tailwind CSS, Shadcn UI, and Tailark components. The platform combines a marketing website with an admin dashboard, built for AI-powered multi-channel outreach.
Code Standards & Patterns
TypeScript & React Development
Write all code in TypeScript (.tsx/.ts files)Use functional components with React hooksDefine proper TypeScript interfaces for all propsExport reusable types and interfaces from componentsApply `const` assertions for readonly objectsEnable TypeScript strict mode incrementallyComponent Architecture Principles
Implement the HeroWrapper pattern for flexible, prop-driven hero sectionsFavor composition over inheritanceBuild reusable components with explicit prop interfacesUse structured content configuration objects for page-specific dataSupport multiple variants (default, simple, minimal) for flexible stylingAvoid double headers - integrate navigation into hero sectionsUse single header approach with consistent "Elemente" brandingStyling & UI Implementation
Use Tailwind CSS utility-first classesFollow mobile-first responsive design (mobile → tablet → desktop)Build on Shadcn UI components as the base layerImplement comprehensive dark mode support with CSS variablesUse CSS variables for consistent theming across componentsTest all breakpoints for responsive behaviorFile Structure & Organization
```
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 component
├── config/ # Site-wide configuration
├── lib/ # Utilities and content management
└── tailark-core/ # Tailark component system
```
Content Management Strategy
Define structured content objects with TypeScript interfacesCentralize site configuration in `config/site.config.ts`Place page-specific content definitions in page component filesUse prop-based content system for maximum reusabilityMaintain clear separation between content and presentationBrand & Product Guidelines
Brand Identity
**Brand name:** "Elemente - AI-Driven Outreach That Converts"**Core value propositions:** AI personalization, multi-channel outreach, workflow automation**Target audiences:** Sales teams, marketing professionals, agencies, B2B companies**Key differentiators:** 300% conversion increases, AI-powered personalization, automation at scalePricing Structure
**Starter:** $49/month - Small teams starting with AI outreach**Professional:** $149/month - Growing teams with advanced needs**Enterprise:** Custom pricing - Large organizations with custom requirements**Trial:** Free trial available, no credit card requiredContent Strategy
Emphasize measurable results and conversion metricsInclude social proof through customer testimonials and case studiesUse benefit-focused copy that addresses user pain pointsShowcase impressive statistics (e.g., "300% conversion increase")Maintain conversion-focused CTAs throughout the experienceComponent Patterns & Best Practices
HeroWrapper Variants
**default:** Full-featured hero with all elements**simple:** Clean, streamlined hero for focused messaging**minimal:** Text-focused hero for content-first pagesStrategic Component Usage
Place CTAs in footers and strategic conversion pointsBuild feature showcases with benefits-oriented copyInclude stats sections with compelling metricsUse testimonials and social proof strategicallyImplement mobile-responsive navigation with hamburger menuExternal Integrations
Support motion/framer-motion for animationsIntegrate Tailark component library properlyEnable multi-channel messaging (email, LinkedIn, phone)Implement analytics and conversion trackingPerformance & SEO
Performance Optimization
Keep bundle sizes minimal and monitoredUse dynamic imports for large componentsOptimize images with Next.js Image componentEnable SVG support with `dangerouslyAllowSVG: true`Lazy load components where appropriateMonitor and optimize Core Web VitalsTrack build times and optimize as neededSEO Implementation
Include proper meta tags on all pagesUse semantic HTML structureImplement Open Graph tags for social sharingAdd structured data where relevantEnsure proper heading hierarchyDevelopment Workflow
1. **Start with strategy** - Define content needs and user goals
2. **Use HeroWrapper** - Implement consistent page headers with the HeroWrapper pattern
3. **Build mobile-first** - Start with mobile layouts, then enhance for larger screens
4. **Test responsiveness** - Verify design across all breakpoints
5. **Optimize performance** - Focus on Core Web Vitals and load times
6. **Implement error handling** - Add proper error boundaries and loading states
7. **Review accessibility** - Ensure ARIA labels and semantic HTML
Code Review Checklist
Before committing code, verify:
[ ] TypeScript interfaces are properly defined and exported[ ] Responsive design is implemented and tested across breakpoints[ ] Accessibility considerations included (ARIA labels, semantic HTML, keyboard navigation)[ ] SEO meta tags and Open Graph tags are present[ ] Content props system is used correctly[ ] No double headers or navigation conflicts exist[ ] Performance optimizations are applied (lazy loading, image optimization)[ ] Error boundaries and loading states are implemented[ ] Dark mode support is functional[ ] Mobile navigation works correctly[ ] CTAs are strategically placed and conversion-focused[ ] TypeScript strict mode compliance (where enabled)Git & Version Control
Commit Guidelines
Write clear, descriptive commit messagesUse semantic versioning for releasesIgnore build artifacts (.next/, dist/, node_modules/)Remove large files before committingGroup related changes in single commitsBranch Strategy
Use feature branches for new developmentKeep main/master branch stable and deployableTest thoroughly before merging to mainCommon Tasks
Adding a New Page
1. Create page file in `app/` directory
2. Define page-specific content object with TypeScript interface
3. Import and configure HeroWrapper with appropriate variant
4. Add page sections using Tailark components
5. Include CTAs at strategic points
6. Add SEO meta tags
7. Test responsive design
Creating a New Component
1. Define TypeScript interface for props
2. Build component with Tailwind utility classes
3. Support dark mode with CSS variables
4. Ensure mobile responsiveness
5. Export component and types
6. Document usage with JSDoc comments
Updating Tailark Components
1. Locate component in `components/blocks/` or `tailark-core/`
2. Preserve existing prop interfaces
3. Maintain backward compatibility
4. Test across all usage locations
5. Update documentation if needed
Troubleshooting
Build Issues
Check TypeScript errors in build outputVerify all imports are correctEnsure environment variables are setClear `.next/` cache if builds fail mysteriouslyStyling Issues
Verify Tailwind classes are spelled correctlyCheck dark mode color scheme variablesTest responsive breakpointsInspect CSS variable values in DevToolsPerformance Issues
Analyze bundle size with Next.js build outputCheck for unnecessary re-renders with React DevToolsOptimize images and lazy load heavy componentsReview network waterfall in browser DevTools