# Udundi - Web Development & Design Agency Website

## Project Overview
Udundi is a modern, full-service e-commerce and web development agency. This is their main marketing website built with Nuxt 3, Vue 3, and TypeScript.

## Tech Stack
- **Framework**: Nuxt 3.16.2 with Vue 3.5.13
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **CMS**: Contentful (GraphQL API)
- **Head Management**: @nuxtjs/seo v3.0.3
- **Build**: esbuild with node-server preset
- **Image Handling**: Nuxt Image with Cloudinary optimization
- **Hosting**: Render.com (render.yaml configured)

## Key Features
- SSR enabled for SEO optimization
- Comprehensive JSON-LD structured data (Article, Organization, LocalBusiness, BreadcrumbList, Service, FAQPage, etc.)
- Dynamic blog pages with rich text rendering from Contentful
- Case study portfolio with filtering and pagination
- Contact form with email integration (udundi-email-api)
- Testimonials and social proof sections
- Service showcases with A/B testing/CRO and Shopify migration landing pages
- Breadcrumb navigation on all pages for UX and SEO
- Responsive design with mobile-first approach
- SEO-optimized alt text for all images
- Proper title tag length restrictions (70 characters max)
- Mobile-optimized images with lazy loading

## Project Structure
src/
├── pages/                 # Route pages
│   ├── index.vue         # Homepage
│   ├── about.vue         # About page
│   ├── services.vue      # Services overview
│   ├── contact.vue       # Contact form
│   ├── testimonials.vue  # Customer testimonials
│   ├── blog-list.vue     # Paginated blog listing
│   ├── case-studies-grid.vue # Portfolio grid
│   ├── ab-testing.vue    # CRO service landing
│   ├── shopify-migrations.vue # Shopify service landing
│   ├── blog/[slug].vue   # Dynamic blog post page
│   └── case-studies/[slug].vue # Dynamic case study page
├── components/           # Vue components organized by feature
├── composables/          # Reusable logic
├── assets/              # Images, fonts, CSS
└── public/              # Static assets and robots.txt

## Important Configuration Files
- **nuxt.config.ts**: Main Nuxt configuration, SSR settings, SEO module setup
- **tailwind.config.js**: Tailwind configuration with custom breakpoints
- **tsconfig.json**: TypeScript configuration
- **eslint.config.mjs**: ESLint rules
- **render.yaml**: Render.com deployment configuration
- **.gitignore**: Git ignore patterns

## SEO Implementation
- **Meta Tags**: useSeoMeta() composable for title, description, robots, canonical, OG tags
- **Structured Data**: JSON-LD schemas injected via useHead()
- **Site URL**: Production: https://udundi.com (configured via useSiteConfig())
- **Sitemap**: Auto-generated by @nuxtjs/seo, located at /sitemap.xml
- **Robots.txt**: Located at /public/robots.txt
- **Breadcrumbs**: Navigation UI components and BreadcrumbList schemas on all pages
- **Alt Text**: All images include descriptive, SEO-optimized alt text
- **Title Tags**: All pages have titles under 70 characters for proper display in search results

## Content Management
- **Blog**: Fetched from Contentful with GraphQL
- **Case Studies**: Dynamic portfolio content from Contentful
- **Service Pages**: Static pages with dynamic testimonials and case study integration
- **Images**: Optimized via Contentful with Cloudinary transforms

## Composables
- useContentful(): Handles all Contentful GraphQL queries
- useSeoImage(): Generates OG image URLs
- 
enderRichText(): Renders Contentful rich text with HTML
- alidateColorString(): Validates color values
- useNav(): Navigation state management
- getContentfulImagePathFromUrl(): Image URL extraction from Contentful

## Development Tips
1. All pages should have robots and canonical meta tags
2. H1 headings should be unique per page and SEO-focused
3. Always add BreadcrumbList and appropriate schema types
4. Use 
ormalizeAssetUrl() for Contentful image URLs (protocol-relative fixes)
5. Rich text from Contentful uses custom renderers for videos and embeds
6. Contact form posts to external email API - check Render.com endpoint availability
7. Title tags must be under 70 characters to display properly in search results
8. All images require descriptive alt text for accessibility and SEO

## Recent SEO Improvements
- Added meta tags, structured data, and breadcrumbs to all pages
- Implemented Article, BreadcrumbList, Service, FAQPage, Organization, LocalBusiness schemas
- Fixed H1 heading hierarchy across pages
- Added breadcrumb navigation UI components
- Enhanced OG tags with article-specific metadata
- Added alt text to all images for accessibility
- Shortened all title tags to meet 70-character limit
- Fixed contactPoint schema structure to be contactPoint array
- Added itemReviewed field to Review schemas

## Deployment
- Runs on Render.com with Node 18+ runtime
- Environment variables configured in Render dashboard
- Auto-deploys on main branch push
- Sitemap auto-generated and available at /sitemap.xml

## Contact & Services
- Contact form: /contact
- Services: /services, /shopify-migrations, /ab-testing
- Case studies: /case-studies-grid and /case-studies/[slug]
- Blog: /blog-list and /blog/[slug]