Test site please

OfficeIQ - Marketing Website

A high-performance, SEO-optimized marketing website built with Astro.js. Designed for scalability with a page-based component architecture and integrated with PagesCMS for easy content management.

🎯 Project Overview

This is the official OfficeIQ marketing website featuring:

• Homepage with hero, features, pricing, and testimonials
• Blog with content collections and PagesCMS integration
• SEO-optimized with structured data and meta tags
• Performance-first with compression, prefetch, and optimized assets
• Scalable architecture ready for multiple landing pages

📁 Folder Structure

The project uses a page-based component organization for easy navigation and scalability:

officeiq-astrojs/
├── src/
│   ├── components/
│   │   ├── home/                    # Homepage-specific components
│   │   │   ├── sections/            # Hero, FAQ, Comparison, etc.
│   │   │   ├── features/            # FeaturesTabs, InteractiveDemo
│   │   │   └── pricing/             # PricingCalculator
│   │   ├── shared/                  # Cross-page components
│   │   │   ├── layout/              # Header, Footer
│   │   │   ├── blog/                # Blog components
│   │   │   └── seo/                 # SEO, FAQStructuredData
│   │   └── modules/                 # Future: Module landing pages
│   │
│   ├── pages/                       # Routes (URL structure)
│   │   ├── index.astro              # Homepage (/)
│   │   └── blog/
│   │       ├── index.astro          # Blog listing (/blog)
│   │       └── [slug].astro         # Blog posts (/blog/post-name)
│   │
│   ├── content/                     # Content Collections (Markdown)
│   │   ├── blog/                    # Blog posts (.md files)
│   │   └── config.ts                # Content schema
│   │
│   ├── layouts/                     # Page layouts
│   │   └── BaseLayout.astro         # Base HTML structure
│   │
│   ├── data/                        # Static data & utilities
│   │   └── authors.ts               # Author information
│   │
│   ├── assets/images/               # Optimized images (developer-managed)
│   └── styles/global.css            # Global styles
│
├── public/                          # Static assets (served as-is)
│   ├── images/blog/                 # Blog images (CMS-uploaded)
│   ├── favicon.svg
│   └── robots.txt
│
├── docs/                            # Documentation
│   ├── SEO-SETUP.md
│   └── PERFORMANCE-INTEGRATIONS.md
│
├── reference/                       # Design files & prototypes
│   ├── component-*.html
│   └── sample-dashboard/
│
├── astro.config.mjs                 # Astro configuration
├── tailwind.config.mjs              # Tailwind CSS config
├── pagescms.config.yml              # PagesCMS configuration
└── package.json

Why This Structure?

• Page-based organization - Components grouped by which page uses them
• Easy to scale - Add new landing pages without cluttering existing code
• Clear separation - Pages (routes) vs Components (building blocks)
• Team-friendly - Different developers can work on different pages

🚀 Astro Integrations

Core Integrations

Performance Features

• Image Optimization - Automatic WebP conversion, responsive sizes (via astro:assets)
• Lazy Loading - Images load only when needed
• Code Splitting - Only load what’s needed per page
• Asset Compression - All assets minified in production

🔍 SEO Implementation

What We Built

1. SEO Component (src/components/shared/seo/SEO.astro)

   • Meta title and description
   • Open Graph tags (Facebook, LinkedIn)
   • Twitter Card tags
   • Canonical URLs
   • Structured data (JSON-LD)

2. Smart Fallbacks

   • If no SEO title → uses page title
   • If no OG image → uses featured image
   • If no meta description → uses excerpt

3. Blog Post SEO

   • Custom SEO title/description per post
   • Featured images for social sharing
   • Author information
   • Category and tags
   • Structured data for articles

4. Technical SEO

   • Sitemap.xml (auto-generated)
   • robots.txt
   • Semantic HTML
   • Fast page loads (Core Web Vitals)
   • Mobile-responsive

SEO Checklist for Each Page

• ✅ Unique title (50-60 characters)
• ✅ Meta description (150-160 characters)
• ✅ Featured image (1200x630px for social)
• ✅ Semantic HTML structure
• ✅ Fast loading time
• ✅ Mobile-friendly

📝 Content Management with PagesCMS

For Content Writers

PagesCMS provides a user-friendly interface to manage blog posts without touching code.

How to Add a Blog Post

1. Access PagesCMS

   • Connect to your GitHub repository
   • Navigate to “Blog Posts” collection

2. Create New Post

   • Click “New Blog Post”
   • Fill in the required fields (see below)

3. Required Fields

4. Optional SEO Fields (for better Google ranking)

5. Optional Social Media Fields (for custom social previews)

6. Write Content

   • Use the markdown editor
   • Add images by uploading (they go to public/images/blog/)
   • Format with markdown (headings, lists, links, etc.)

7. Preview & Publish

   • Preview your post
   • Click “Save” to commit to GitHub
   • Changes deploy automatically

Image Best Practices

• Featured images: 1200x630px, <200KB

• Inline images: Optimize before upload (<200KB each)

• Alt text: Always add descriptive alt text for SEO

  ![Office management dashboard showing task tracking](/images/blog/dashboard.jpg)

SEO Tips for Writers

1. Title: Include main keyword, keep under 60 characters
2. Excerpt: Compelling summary with keyword, 120-160 characters
3. Headings: Use H2, H3 for structure (## Heading, ### Subheading)
4. Images: Descriptive filenames and alt text
5. Links: Link to related posts and external resources
6. Length: Aim for 800+ words for better SEO

�️ Development

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev
# Visit http://localhost:4321

# Build for production
npm run build

# Preview production build
npm run preview

Adding a New Landing Page

1. Create page file

   src/pages/products.astro

2. Create components

   src/components/products/
   ├── ProductsHero.astro
   ├── ProductsFeatures.astro
   └── ProductsPricing.astro

3. Use in page

   ---
   import BaseLayout from '../layouts/BaseLayout.astro';
   import ProductsHero from '../components/products/ProductsHero.astro';
   ---
   
   <BaseLayout title="Products - Office IQ">
     <ProductsHero />
   </BaseLayout>

🚀 Deployment

Recommended: Cloudflare Pages

1. Push to GitHub
2. Connect to Cloudflare Pages
3. Configure:
   • Build command: npm run build
   • Build output: dist
   • Node version: 18+

Alternative: Vercel, Netlify

Both support Astro SSR out of the box. Just connect your GitHub repo.

� Performance Metrics

Current Performance

• Lighthouse Score: 95+ (all categories)
• Page Load: <1s (optimized)
• Bundle Size: ~250KB (compressed)
• Core Web Vitals: All green

Optimizations Applied

• ✅ Image optimization (WebP, responsive)
• ✅ Code minification
• ✅ Asset compression
• ✅ Prefetch on hover
• ✅ Lazy loading
• ✅ Optimized third-party scripts

📚 Documentation

• SEO Setup: docs/SEO-SETUP.md
• Performance: docs/PERFORMANCE-INTEGRATIONS.md
• Astro Docs: docs.astro.build
• PagesCMS: pagescms.org

🎯 Next Steps

Immediate

• Update site URL in astro.config.mjs
• Connect PagesCMS to GitHub
• Deploy to production

Future Enhancements

• Add module landing pages (Documents, Vendors, etc.)
• Implement newsletter signup
• Add customer testimonials
• Create case studies section

🤝 Team

Built for: OfficeIQ
Tech Stack: Astro.js, Tailwind CSS, PagesCMS
Hosting: Cloudflare Pages (SSR mode)

Questions? Check the docs folder or reach out to the development team.