Agentic AI Consulting GmbH Website

Production-ready Next.js website for Agentic AI Consulting GmbH - a German enterprise AI consulting company.

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn
• Git

Installation

1. Clone the repository:

git clone <repository-url>
cd agentic-ai-consulting

2. Install dependencies:

npm install

3. Create environment file:

cp .env.example .env.local

4. Start development server:

npm run dev

5. Open http://localhost:3000 in your browser.

📁 Project Structure

├── src/
│   ├── app/              # Next.js App Router pages
│   │   ├── about/        # About page
│   │   ├── blog/         # Blog listing and posts
│   │   ├── careers/      # Careers page
│   │   ├── case-studies/ # Case studies
│   │   ├── contact/      # Contact page
│   │   ├── services/     # Services pages
│   │   ├── solutions/    # Industry solutions
│   │   ├── api/          # API routes
│   │   ├── layout.tsx    # Root layout
│   │   ├── page.tsx      # Home page
│   │   ├── sitemap.ts    # Sitemap generation
│   │   └── robots.ts     # Robots.txt
│   ├── components/       # React components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── ContactForm.tsx
│   │   ├── CookieBanner.tsx
│   │   ├── Footer.tsx
│   │   ├── Header.tsx
│   │   ├── Hero.tsx
│   │   └── ThemeProvider.tsx
│   ├── lib/              # Utilities and data
│   └── styles/           # Global styles
├── public/               # Static assets
│   ├── logo.svg
│   └── favicon.ico
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── next.config.mjs

🛠️ Technologies

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Forms: EmailJS / Formspree integration ready

🎨 Customization Guide

Changing Branding

1. Logo: Replace public/logo.svg with your logo
2. Colors: Edit tailwind.config.ts - primary, navy, and gray color palettes
3. Fonts: Update fonts in src/app/layout.tsx (Inter & Poppins)
4. Company Name: Search and replace "Agentic AI Consulting GmbH" throughout codebase

Adding Content

1. Case Studies: Edit src/lib/data.ts or create CMS integration
2. Blog Posts: Add markdown files or integrate with headless CMS
3. Team Members: Update team data in src/app/about/page.tsx
4. Services: Modify service data in src/app/services/page.tsx

Form Integration

The contact and careers forms are ready for integration with:

• EmailJS: Uncomment EmailJS code in ContactForm.tsx and add API keys to .env.local
• Formspree: Point form action to Formspree endpoint
• API Routes: Complete the API route implementations in src/app/api/

📧 Form Setup

Option 1: EmailJS

1. Sign up at EmailJS
2. Create a service and template
3. Add to .env.local:

NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key

4. Uncomment EmailJS code in ContactForm.tsx

Option 2: Next.js API Route

1. Complete implementation in src/app/api/contact/route.ts
2. Add email service (Resend, SendGrid, etc.)
3. Configure environment variables

🌍 Deployment

Vercel (Recommended)

1. Push code to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy

Netlify

1. Build command: npm run build
2. Publish directory: .next
3. Add environment variables in Netlify dashboard

Docker

docker build -t agentic-ai-website .
docker run -p 3000:3000 agentic-ai-website

🔧 Environment Variables

Create .env.local:

# EmailJS (if using)
NEXT_PUBLIC_EMAILJS_SERVICE_ID=
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=

# Site URL
NEXT_PUBLIC_SITE_URL=https://agentic-ai-consulting.com

# Analytics (optional)
NEXT_PUBLIC_GA_ID=

# Contact Email
[email protected]

📊 SEO & Performance

• ✅ SEO metadata configured
• ✅ JSON-LD structured data
• ✅ Sitemap generation
• ✅ Robots.txt
• ✅ Open Graph tags
• ✅ Twitter cards
• ✅ Image optimization ready
• ✅ Lazy loading implemented

Performance Optimization

• Images are optimized with Next.js Image component
• Code splitting with Next.js App Router
• Font optimization with next/font
• CSS optimized with Tailwind

🎯 Features

• ✅ Responsive design (mobile-first)
• ✅ Dark/Light theme toggle
• ✅ GDPR-compliant cookie banner
• ✅ Accessibility (ARIA labels, keyboard navigation)
• ✅ Smooth animations (Framer Motion)
• ✅ Contact forms
• ✅ Blog structure
• ✅ Case studies showcase
• ✅ Careers page with application form
• ✅ Legal pages (Privacy, Terms)

📝 Content Placeholders

The following assets need to be replaced with actual content:

• /public/clients/* - Client logo images
• /public/team/* - Team member photos
• Hero images - Generate using provided prompts (see IMAGE_PROMPTS.md)
• Case study images
• Blog post images

🖼️ Image Generation Prompts

See IMAGE_PROMPTS.md for DALL·E / Midjourney prompts for hero images, banners, and backgrounds.

🔍 Analytics Integration

To add analytics:

1. Google Analytics: Add GA ID to environment variables
2. Custom Analytics: Add tracking code in src/app/layout.tsx

🧪 Testing

npm run lint    # Run ESLint
npm run build   # Test production build

📚 Additional Resources

• Next.js Documentation
• Tailwind CSS
• Framer Motion

📄 License

Proprietary - Agentic AI Consulting GmbH

🤝 Support

For questions or issues, contact:

• Email: [email protected]
• Website: https://agentic-ai-consulting.com

Built with ❤️ by Agentic AI Consulting GmbH