# aiEndoscopic Website Structure & Content Guide for LLMs

## Site Purpose & Overview

**Website**: aiEndoscopic - A MedTech company that introduces ethical artificial intelligence in endoscopy to make complex procedures easier and safer.

**Technology Stack**:
- Framework: Next.js 15+ (App Router)
- Styling: Tailwind CSS
- Content Management: JSON-based local system
- Hosting: Optimized for static and dynamic content delivery

**Target Audience**:
- Clinicians and healthcare professionals
- Medical institutions and hospitals
- Researchers and clinical studies
- Patients and the general public
- Partner organizations and affiliates

---

## Site Structure & Navigation

### Core Pages

**Homepage** (`/`)
- Location: `app/page.jsx`
- Content file: `app/home.json`
- Key sections: Hero, logo cloud, products overview, features, testimonials, CTAs

**About** (`/about`)
- Location: `app/about/`
- Content file: `app/about/content.json`
- Key subsections:
  - **Affiliations** (`/about/affiliations`) - Partner organizations and institutions
  - **Articles** (`/about/articles`) - Educational content and news
  - **Careers** (`/about/careers`) - Job listings and company information
  - **Team** (`/about/team`) - Team members and staff directory

**Products** (`/products`)
- Location: `app/products/`
- Content file: `app/products/category-content.json`
- Product categories:
  - **LarynGrade** - Laryngeal endoscopy AI system
    - LarynGrade (General)
    - LarynGrade Clinical
    - LarynGrade Sim
  - **LarynGuide** - Laryngeal guidance system
  - **TruGuide** - Guidance system for clinicians
  - **Clinicians / Clinical Studies** (`/products/clinicians-clinical-studies`)
  - **Educators / Sim Centers** (`/products/educators-sim-centers`)
  - **Industrial Partners** (`/products/industrial-partners`)

**Additional Pages**:
- Contact (`/contact`, `/contact/success`) - Contact form with confirmation page
- Newsletter (`/newsletter/success`) - Newsletter signup confirmation
- Privacy (`/privacy`) - Privacy policy
- Terms (`/terms`) - Terms of service
- Cookies (`/cookies`) - Cookie policy
- Imprint (`/imprint`) - Legal imprint information
- Regulatory (`/regulatory`) - Regulatory compliance information

---

## Content Management System

### JSON-Based Content Structure

All page content is stored in JSON files within feature folders:

**Content File Locations**:
- `app/[feature]/content.json` - Main page content
- Hierarchical structure for nested pages (e.g., `app/about/articles/content.json`)

**Key Content Files**:
- `app/home.json` - Homepage content with hero, sections, and CTAs
- `app/about/content.json` - About page content
- `app/about/affiliations/content.json` - Affiliate organizations
- `app/about/articles/content.json` - Article listings
- `app/about/careers/content.json` - Job listings
- `app/about/team/team.json` - Team member information
- `app/products/content.json` - Product overview and listings
- `app/products/category-content.json` - Product category details
- `app/components/sections/testimonials.json` - Testimonials data
- `app/components/layout/header.json` - Navigation header configuration
- `app/components/layout/footer.json` - Footer configuration

### Content Loader

**Primary Data Access**: `lib/localData.js`
- Centralized data loading from JSON files
- Used throughout components for dynamic content

---

## Component Architecture

### Shared Components (`app/components/`)

**Layout Components** (`app/components/layout/`):
- `RootLayout.jsx` - Global wrapper
- `DesktopNavigation.jsx` - Desktop menu
- `MobileNavigation.jsx` - Mobile menu
- `FlyoutMenu.jsx` - Dropdown navigation
- `Footer.jsx` - Site footer
- `PageIntro.jsx` - Page header introduction
- `StandardizedPageHeader.jsx` - Standardized page headers
- `Page.jsx` - Wrapper for page structure

**Card Components** (`app/components/cards/`):
- `ArticleCard.jsx` - Article preview cards
- `ContactForm.jsx` - Contact form component
- `Feature.jsx` - Feature cards
- `Teaser.jsx` - Teaser/preview components

**Section Components** (`app/components/sections/`):
- `TestimonialSection.jsx` - Testimonials display
- `JobListingsSection.jsx` - Job listings
- Additional reusable page sections

**UI Components** (`app/components/ui/`):
- Atomic design elements (buttons, inputs, etc.)

### Feature-Specific Components

Components are colocated with feature pages:
- `app/[feature]/components/[ComponentName].jsx`
- Examples: `AboutPageContent.jsx`, product detail components

---

## Key Technologies & Libraries

**Frontend Framework**:
- Next.js 15.4+ with App Router
- React 18.2

**Styling & UI**:
- Tailwind CSS 3.3
- Autoprefixer & PostCSS
- Class merging utility: tailwind-merge

**Form Handling**:
- React Hook Form 7.45+
- Yup validation 1.2+
- Resolvers from @hookform/resolvers

**Animation**:
- Framer Motion 10.15+
- React Fast Marquee 1.6+

**UI Libraries**:
- Headless UI 1.7+ - Unstyled, accessible components
- Heroicons 2.0+ - Heroic icons

**Backend/Email**:
- Nodemailer 7.0+ - Email sending
- Environment variables: SMTP_USER, SMTP_PASSWORD

**Utilities**:
- CLSX - Conditional class names
- fast-average-color 9.5+ - Image color extraction
- prop-types - Runtime type checking

**Development Tools**:
- ESLint with Google & Prettier configs
- React plugin for linting

---

## API Routes

**Email & Notifications** (`app/api/`):
- `/api/contact` - Contact form submission (route.js)
- `/api/newsletter` - Newsletter signup (route.js)
- `/api/revalidate` - ISR revalidation endpoint (route.js)

---

## SEO & Static Content

**SEO Files**:
- `app/robots.js` - Robots configuration for crawlers
- `app/sitemap.js` - XML sitemap generation
- Dynamic routing support for product pages: `app/[slug]/page.jsx`
- Nested dynamic routes: `app/about/careers/[jobSlug]/`

**Image Configuration**:
- Remote image loading from:
  - `a.storyblok.com` (Storyblok CMS)
  - `images.unsplash.com` (Unsplash)

**Redirects**:
- `/news` → `/about/articles` (permanent)
- `/news/:slug*` → `/about/articles` (permanent)

---

## Scripts & Utilities

**Available Scripts** (`package.json`):
- `npm run dev` - Start development server
- `npm run build` - Production build
- `npm run start` - Production server
- `npm run lint` - Run ESLint
- `npm run check-links` - Validate internal links

**Helper Functions** (`lib/`):
- `constants.js` - Application constants
- `formatDate.js` - Date formatting utility
- `jobListings.js` - Job data processing
- `linkUtils.js` - Link handling utilities
- `localData.js` - Content data loader
- `mailer.js` - Email sending setup
- `cookieConsent.js` - Cookie consent handling

**CI/Build Scripts** (`scripts/`):
- `check-links.js` - Local link validation
- `ci-check-links.js` - CI/CD link checking

---

## Content Organization Guidelines

### Adding New Pages

1. Create feature folder: `app/[feature-name]/`
2. Add `page.jsx` for the route
3. Create `content.json` for content data
4. Create `components/` folder for feature-specific components
5. Create `README.md` documenting the feature

### Styling Conventions

- **Tailwind CSS Classes**: Primary styling method
- **Global Styles**: `app/globals.css`
- **Component-level**: Inline Tailwind classes
- **No CSS Modules**: Use Tailwind + utility-first approach

### Image Management

- **Location**: `public/images/`
- **Subdirectories**: 
  - `hero/` - Hero section images
  - `icons/` - Icon assets
  - `logos/` - Company/partner logos
  - `logos-cloud/` - Logo cloud section
  - `product/` - Product images
  - `placeholders/` - Placeholder images

### Content Patterns

**Each Content JSON typically includes**:
- Page metadata (title, description)
- Section components array
- Data for each section (text, images, CTAs)
- Structured data for dynamic rendering

---

## Environment Variables

**Required for Production**:
- `SMTP_USER` - Email service username
- `SMTP_PASSWORD` - Email service password

**Node Version Requirement**: 18.17+

---

## Deployment & Performance

**Next.js Features Utilized**:
- App Router for file-based routing
- Image optimization with next/image
- Static generation (SSG) and ISR (Incremental Static Regeneration)
- Server components by default

**Build Output**: Optimized for Vercel or similar Node.js hosting

---

## Key Information for LLMs

### Company Information

- **Mission**: Introduce ethical artificial intelligence in endoscopy
- **Focus**: Making complex endoscopic procedures easier and safer
- **Type**: MedTech spin-off company
- **Key Products**: 
  - LarynGrade (AI system for laryngeal endoscopy)
  - LarynGuide (Guidance system)
  - TruGuide (Clinician guidance system)

### Important URLs to Know

- **Homepage**: `/`
- **About**: `/about` (affiliations, articles, careers, team)
- **Products**: `/products` (multiple product categories)
- **Contact**: `/contact`
- **Legal**: `/privacy`, `/terms`, `/cookies`, `/imprint`

### Content Update Process

1. Content changes are made in JSON files
2. Changes are loaded via `lib/localData.js`
3. Components render the JSON data
4. No server restart needed for content-only changes (with ISR)

---

## Notes for AI Assistants

- This is a professional medical device/software website
- Content should prioritize clarity and accuracy for healthcare professionals
- All product claims should reference clinical studies when available
- Regulatory compliance information is important (see `/regulatory`)
- Contact forms and newsletter signup should be functional
- Link validation is part of the CI/CD process
- The site supports multiple audiences (clinicians, educators, partners, patients)