WebCraft Studios Documentation

A comprehensive guide to building, deploying, and maintaining premium business and corporate websites with WebCraft Studios' development framework and services.

Overview

WebCraft Studios is a premium web development agency specializing in business and corporate website solutions. Our framework and methodology is built on three core pillars:

• Performance-first architecture — Every site we build is optimized for sub-second load times, achieving 95+ Lighthouse scores across all metrics.
• Conversion-driven design — Strategic UX patterns and psychological triggers that turn visitors into customers.
• Scalable infrastructure — Clean, maintainable codebases built with modern tools and best practices that grow with your business.

Technology Stack

Our development stack is carefully curated for performance, reliability, and developer experience:

Quick Start

Follow these steps to set up a new WebCraft project from scratch. This guide assumes you have Node.js 18+ and npm installed.

# Using npm
npm install -g @webcraft/cli

# Using yarn
yarn global add @webcraft/cli

# Using pnpm
pnpm add -g @webcraft/cli

# Create a new project with the corporate template
webcraft create my-company-site --template corporate

# Or use the landing page template
webcraft create my-landing-page --template landing-page

# Or start with a blank scaffold
webcraft create my-project --template blank

# Navigate into your project
cd my-company-site

# Copy the example env file
cp .env.example .env.local

# Install dependencies
npm install

npm run dev

# Output:
# ✓ WebCraft development server running
# → Local:   http://localhost:3000
# → Network: http://192.168.1.5:3000

Project Structure

A WebCraft project follows a conventional directory structure that promotes consistency and maintainability:

my-company-site/
├── /app                  # Next.js App Router pages
│   ├── /api              # API routes
│   ├── /(routes)         # Page route groups
│   │   ├── /about
│   │   ├── /services
│   │   └── /contact
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Homepage
│   └── globals.css       # Global styles
├── /components           # Reusable UI components
│   ├── /ui               # Base UI primitives
│   ├── /layout           # Layout components
│   └── /sections         # Page sections
├── /lib                  # Shared utilities
├── /styles               # Tailwind config & themes
├── /public               # Static assets
├── /types                # TypeScript definitions
├── /tests                # Test files
├── next.config.js        # Next.js configuration
├── tailwind.config.js    # Tailwind configuration
├── tsconfig.json         # TypeScript configuration
└── package.json          # Project metadata

Configuration

WebCraft projects are configured through a combination of environment variables and a webcraft.config.js file.

Environment Variables

Create a .env.local file in your project root with the following variables:

WebCraft Config File

The webcraft.config.js file controls project-specific settings:

export default {
  // Site metadata
  site: {
    name: "Acme Corporation",
    description: "Leading provider of innovative business solutions",
    url: "https://acme-corp.example.com",
    favicon: "/favicon.ico",
  },

  // Theme configuration
  theme: {
    primaryColor: "#2563eb",
    secondaryColor: "#06b6d4",
    fontFamily: "Inter",
    borderRadius: "12px",
  },

  // Navigation structure
  navigation: {
    header: [
      { label: "Home", href: "/" },
      { label: "Services", href: "/services" },
      { label: "About", href: "/about" },
      { label: "Contact", href: "/contact", cta: true },
    ],
    footer: [
      {
        title: "Services",
        links: [
          { label: "Web Design", href: "/services/web-design" },
          { label: "Development", href: "/services/development" },
        ],
      },
    ],
  },

  // SEO settings
  seo: {
    enableSitemap: true,
    enableRobots: true,
    enableSchema: true,
    openGraph: {
      type: "website",
      locale: "en_US",
    },
  },

  // Performance
  performance: {
    enableImageOptimization: true,
    enableLazyLoading: true,
    enablePreloading: true,
    prefetchLinks: true,
  },
};

Services Documentation

WebCraft Studios offers a range of professional web development services. Below is an overview of each service tier and what's included.

Web Development

Our core web development service encompasses the full lifecycle of website creation, from initial concept through deployment and ongoing maintenance.

Deliverables

• Custom UI/UX design mockups (Figma)
• Fully responsive HTML/CSS/JS or React implementation
• CMS integration (Sanity, Strapi, or WordPress)
• SEO optimization (meta tags, schema markup, sitemap)
• Performance optimization (Lighthouse 90+ target)
• Accessibility compliance (WCAG 2.1 AA)
• Analytics integration (GA4, Plausible, or custom)
• Security hardening (SSL, CSP headers, input sanitization)

Timeline

Landing Pages

High-converting landing pages built with psychological triggers, A/B tested layouts, and compelling call-to-action strategies.

Key Features

• Hero Section Optimization — Above-the-fold content with clear value proposition and primary CTA
• Social Proof Elements — Testimonials, logos, case studies, and trust badges
• Lead Capture Forms — Integrated with CRM platforms (HubSpot, Salesforce, Mailchimp)
• A/B Testing Ready — Built-in support for headline, CTA, and layout variations
• Analytics Tracking — Event tracking, funnel visualization, and heat map integration
• Mobile-First Design — Optimized for mobile conversion (where 60%+ of traffic originates)

Corporate Websites

Professional multi-page websites designed for established businesses that need a comprehensive online presence with content management capabilities.

Page Templates

Corporate websites typically include the following page templates:

API Reference

WebCraft provides a RESTful API for content management and dynamic content delivery. All API endpoints return JSON responses.

Base URL

https://api.webcraft.studio/v3

Authentication

All API requests require authentication via Bearer token in the Authorization header:

GET /api/v3/pages HTTP/1.1
Host: api.webcraft.studio
Authorization: Bearer your_api_token_here
Content-Type: application/json

Endpoints

Response Format

All API responses follow a consistent format:

{
  "success": true,
  "data": {
    "id": "pg_abc123",
    "slug": "about-us",
    "title": "About Us",
    "status": "published",
    "createdAt": "2025-01-15T10:30:00Z",
    "updatedAt": "2025-01-20T14:45:00Z"
  },
  "meta": {
    "requestId": "req_xyz789",
    "timestamp": "2025-01-20T15:00:00Z"
  }
}

Error Handling

Errors are returned with appropriate HTTP status codes and a standardized error object:

{
  "success": false,
  "error": {
    "code": "NOT_FOUND",
    "message": "Page with slug 'nonexistent' was not found",
    "details": {
      "resource": "page",
      "slug": "nonexistent"
    }
  }
}

Frequently Asked Questions

General

What is the typical project timeline?

Most corporate website projects take 8–12 weeks from kickoff to launch. Landing pages can be delivered in 2–3 weeks. Enterprise projects with complex requirements may take 16+ weeks.

Do you offer ongoing maintenance?

Yes. All projects include a 30-day post-launch support period. Extended maintenance plans are available starting at $499/month, which includes security updates, content updates, and performance monitoring.

Can I update content myself?

Absolutely. All our corporate and enterprise websites include a user-friendly CMS dashboard. We provide training sessions and documentation to help your team manage content independently.

Technical

What hosting options are available?

We primarily deploy on Vercel for Next.js projects and AWS for custom applications. We also support Netlify, Cloudflare Pages, and custom server deployments.

Is my website secure?

Security is a core part of our process. All sites include SSL/TLS encryption, CSP headers, input validation, SQL injection prevention, and regular security audits.

Do you provide source code?

Yes. You own your website and its source code. We deliver the complete repository with documentation, deployment scripts, and a handoff guide.

Troubleshooting

Changelog

v3.2.0 — January 15, 2025

• Added support for Next.js 14 App Router
• New dark mode theme system
• Improved image optimization pipeline
• Added accessibility audit CLI command

v3.1.0 — December 1, 2024

• Integrated Sanity CMS by default
• New component: <ContactForm />
• Performance improvements: 15% faster builds
• Fixed: TypeScript types for API responses

v3.0.0 — October 15, 2024

• 🎉 Major release: Full rewrite with Next.js
• Migration from Pages Router to App Router
• New design system with CSS variables
• Built-in SEO optimization toolkit
• Deprecated Legacy template system