Modern Corporate Website for Consulting Company

Developed a modern corporate website focused on performance, SEO, and lead generation for ConsultPro Vietnam, a leading management consulting firm in Vietnam.

Project Details:

• Client: ConsultPro Vietnam
• Industry: Management Consulting / Business Consulting
• Timeline: 2 months (March - April 2024)
• Team: 2 developers, 1 designer, 1 content writer
• Role: Lead Frontend Developer

Challenge

ConsultPro Vietnam needed a new corporate website to replace their outdated existing site. The old website had many issues:

Background

Their current website:

• Poor performance: Load time >5 seconds, high bounce rate
• Not responsive: Terrible mobile experience
• Weak SEO: Not appearing in Google rankings
• Difficult to update: Needed developers to change content
• No multi-language: Vietnamese only, missing international clients

Specific Requirements

Client outlined key requirements:

Client's main requirements:

1. Performance Excellence: Lighthouse score >95, load time <2s
2. Bilingual Support: Vietnamese and English with easy content management
3. SEO Optimization: Need to rank top 5 for main keywords
4. Easy Content Updates: Marketing team can update without developers
5. Modern Design: Professional, trustworthy, and reflects brand identity
6. Lead Generation: Contact forms, CTAs, and conversion optimization

Key Challenges

Main challenges:

• Tight Timeline: Only 2 months to complete
• Content Migration: 100+ pages need migration from old website
• SEO Preservation: Maintain existing SEO rankings during migration
• Bilingual Content: Translate and manage content for 2 languages
• Performance vs Rich Content: Many images and content but must be fast

Solution

We proposed a solution using JAMstack architecture with Next.js and headless CMS.

Approach & Methodology

Development Approach:

• Agile methodology: 2-week sprints with regular client demos
• Component-first design: Build reusable UI components
• Mobile-first development: Optimize for mobile first
• Progressive enhancement: Core functionality works everywhere
• Performance budget: <2s load time, <300KB initial bundle

System Architecture

┌───────────────┐     ┌─────────────┐     ┌────────────────┐
│  Next.js App  │────▶│ Contentful  │     │  Vercel CDN    │
│  (Frontend)   │     │    (CMS)    │     │  (Hosting)     │
└───────────────┘     └─────────────┘     └────────────────┘
        │                     │                     │
        ▼                     ▼                     ▼
┌───────────────┐     ┌─────────────┐     ┌────────────────┐
│  Static Site  │     │   GraphQL   │     │  Edge Network  │
│  Generation   │     │     API     │     │  (CDN Cache)   │
└───────────────┘     └─────────────┘     └────────────────┘

Architecture Components:

• Frontend: Next.js 15 with App Router, Static Site Generation (SSG)
• CMS: Contentful headless CMS for content management
• Styling: Tailwind CSS 4 for rapid UI development
• Hosting: Vercel with global CDN
• Images: Next.js Image Optimization with WebP format
• SEO: next-seo package with structured data

Technology Choices

Next.js 15:

• Static Site Generation: Pre-render pages at build time for maximum performance
• Incremental Static Regeneration: Update content without full rebuild
• Image Optimization: Automatic responsive images with lazy loading
• Built-in i18n: Native support for multi-language

Contentful CMS:

• User-friendly interface: Non-technical users can edit content
• Content modeling: Flexible content structure
• Multi-language support: Built-in localization
• GraphQL API: Efficient data fetching
• Webhook integration: Auto rebuild on content changes

Tailwind CSS:

• Rapid development: Utility-first approach speeds up styling
• Consistent design system: Predefined spacing, colors, typography
• Small bundle size: Only ship CSS actually used
• Dark mode support: Ready for future enhancement

Key Features

1. Homepage with Hero Section:

   • Compelling value proposition
   • Clear CTAs
   • Client logos and testimonials
   • Services overview

2. Services Pages:

   • Detailed service descriptions
   • Case study highlights
   • Pricing information (if applicable)
   • Integrated contact forms

3. About Us:

   • Company story and mission
   • Team members with photos
   • Awards and certifications
   • Office locations with Google Maps

4. Blog/Insights:

   • Thought leadership content
   • Industry insights
   • SEO-optimized articles
   • Social sharing buttons

5. Contact & Lead Generation:

   • Multi-step contact form
   • Service-specific inquiry forms
   • Live chat integration
   • Newsletter subscription

6. Bilingual Support:

   • Language switcher in header
   • SEO-friendly URL structure (/en/about, /vi/gioi-thieu)
   • Automatic language detection
   • Content fallback strategy

Implementation

Phase 1: Setup & Design System (Week 1-2)

Goals:

• Project setup and tooling
• Design system implementation
• Component library development

Technical Setup:

// next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  i18n: {
    locales: ['vi', 'en'],
    defaultLocale: 'vi',
    localeDetection: true,
  },
  images: {
    domains: ['images.ctfassets.net'], // Contentful CDN
    formats: ['image/webp', 'image/avif'],
  },
  // Enable Incremental Static Regeneration
  experimental: {
    isrMemoryCacheSize: 0,
  },
};
 
export default nextConfig;

Component Library:

Created reusable components:

• <Button> - Multiple variants (primary, secondary, outline)
• <Card> - Content cards with consistent styling
• <Section> - Layout wrapper with responsive spacing
• <Heading> - Typography components with SEO
• <ContactForm> - Multi-step form with validation

Design System:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          // ... full color scale
          900: '#1e3a8a',
        },
        // Brand colors
        brand: {
          blue: '#0066CC',
          navy: '#003366',
          gray: '#F5F5F5',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        heading: ['Montserrat', 'sans-serif'],
      },
    },
  },
};

Phase 2: CMS Integration & Content Migration (Week 3-4)

Contentful Content Modeling:

// types/contentful.ts
interface PageContent {
  sys: {
    id: string;
    contentType: {
      sys: { id: 'page' };
    };
  };
  fields: {
    title: string;
    slug: string;
    seoTitle: string;
    seoDescription: string;
    content: Document; // Rich text content
    locale: 'vi' | 'en';
  };
}
 
interface ServiceContent {
  // Service-specific fields
  title: string;
  description: string;
  icon: Asset;
  features: string[];
  pricing?: PricingInfo;
}

GraphQL Data Fetching:

// lib/contentful.ts
import { createClient } from 'contentful';
 
const client = createClient({
  space: process.env.CONTENTFUL_SPACE_ID!,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN!,
});
 
export async function getPageBySlug(slug: string, locale: string) {
  const entries = await client.getEntries({
    content_type: 'page',
    'fields.slug': slug,
    locale,
    limit: 1,
  });
 
  return entries.items[0];
}
 
export async function getAllPages(locale: string) {
  const entries = await client.getEntries({
    content_type: 'page',
    locale,
  });
 
  return entries.items;
}

Static Site Generation:

// app/[locale]/[slug]/page.tsx
export async function generateStaticParams() {
  const pages = await getAllPages('vi');
  
  return pages.map((page) => ({
    locale: page.fields.locale,
    slug: page.fields.slug,
  }));
}
 
export default async function Page({ 
  params 
}: { 
  params: { locale: string; slug: string } 
}) {
  const page = await getPageBySlug(params.slug, params.locale);
  
  return (
    <article>
      <h1>{page.fields.title}</h1>
      <RichText content={page.fields.content} />
    </article>
  );
}

Phase 3: SEO & Performance Optimization (Week 5-6)

SEO Implementation:

// app/[locale]/[slug]/page.tsx
import type { Metadata } from 'next';
 
export async function generateMetadata({ 
  params 
}: { 
  params: { locale: string; slug: string } 
}): Promise<Metadata> {
  const page = await getPageBySlug(params.slug, params.locale);
  
  return {
    title: page.fields.seoTitle,
    description: page.fields.seoDescription,
    alternates: {
      canonical: `https://consultpro.vn/${params.locale}/${params.slug}`,
      languages: {
        'vi': `/vi/${params.slug}`,
        'en': `/en/${params.slug}`,
      },
    },
    openGraph: {
      title: page.fields.seoTitle,
      description: page.fields.seoDescription,
      url: `https://consultpro.vn/${params.locale}/${params.slug}`,
      siteName: 'ConsultPro Vietnam',
      locale: params.locale === 'vi' ? 'vi_VN' : 'en_US',
      type: 'website',
    },
  };
}

Performance Optimizations:

1. Image Optimization:

   • Convert all images to WebP/AVIF
   • Implement lazy loading
   • Use Next.js Image component
   • Compress images to <100KB

2. Code Splitting:

   • Dynamic imports for heavy components
   • Route-based splitting automatic with App Router

3. Caching Strategy:

   • Static pages cached at CDN edge
   • ISR revalidation every 60 seconds
   • Client-side caching with SWR

4. Bundle Optimization:

   • Tree shaking unused code
   • Minification and compression
   • CSS purging with Tailwind

Phase 4: Testing & Launch (Week 7-8)

Testing Strategy:

// __tests__/pages/home.test.tsx
import { render, screen } from '@testing-library/react';
import HomePage from '@/app/[locale]/page';
 
describe('HomePage', () => {
  it('renders hero section', () => {
    render(<HomePage />);
    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
  });
 
  it('displays CTAs', () => {
    render(<HomePage />);
    expect(screen.getByText('Contact Us')).toBeInTheDocument();
  });
});

Performance Testing:

• Lighthouse scores: 98/100 average
• Core Web Vitals:
  • LCP: 1.2s
  • FID: <100ms
  • CLS: 0.05

Launch Checklist:

• ✅ All content migrated and proofread
• ✅ SEO meta tags complete
• ✅ Analytics integrated (GA4, Plausible)
• ✅ Forms tested and working
• ✅ 301 redirects setup for old URLs
• ✅ SSL certificate configured
• ✅ DNS updated
• ✅ Monitoring setup (Sentry, Vercel Analytics)

Outcome

The new website delivered impressive results for ConsultPro Vietnam.

Key Metrics

Performance and business metrics after launch:

| Metric | Before | After | Improvement | |--------|--------|-------|-------------| | Lighthouse Score | 45/100 | 98/100 | +118% | | Page Load Time | 5.2s | 1.3s | -75% | | Mobile Score | 38/100 | 96/100 | +153% | | Bounce Rate | 65% | 32% | -51% | | Avg Session Duration | 1:45 | 3:20 | +90% | | Lead Generation | 12/month | 26/month | +117% | | Organic Traffic | 800/month | 2,400/month | +200% |

Business Impact

• SEO Rankings: Achieved top 3 Google rankings for 5 main target keywords
• Lead Quality: Higher quality leads with detailed inquiry forms
• International Reach: 35% traffic from international visitors
• Content Updates: Marketing team can update content in 10 minutes vs 3 days before
• Cost Savings: $2K/month saved on content updates (no developer needed)

Client Testimonial

"The new website has transformed how we present our business online. Excellent performance, professional design, and especially the ability to easily manage content ourselves. Leads doubled in just 2 months!"

— Nguyen Thi Mai, Marketing Director at ConsultPro Vietnam

Lessons Learned

Technical Learnings:

1. JAMstack delivers: Static site generation with ISR = best of both worlds
2. Headless CMS empowers clients: Content teams love being independent
3. Performance = SEO: Fast sites rank better and convert better

Process Learnings:

1. Content migration takes time: Allocate 30% of timeline for content
2. Client training crucial: Spend time training team on CMS
3. Progressive rollout works: Soft launch → feedback → iterate → full launch

Future Enhancements

Planned for future phases:

• Client Portal: Login area for clients to view project progress
• Resource Library: Downloadable whitepapers and guides
• Blog Enhancement: Author profiles, series, advanced search
• Chatbot Integration: AI-powered initial inquiry screening
• Advanced Analytics: Heatmaps, session recordings with Hotjar

Technology Stack

Frontend:

• Next.js 15.5.4 (App Router, SSG, ISR)
• TypeScript 5.9
• Tailwind CSS 4.1
• React 19.0

Content Management:

• Contentful (Headless CMS)
• GraphQL API
• Rich Text Editor

Hosting & Infrastructure:

• Vercel (Hosting + CDN)
• Vercel Analytics
• Automatic deployments from GitHub

SEO & Analytics:

• next-seo (Metadata management)
• Google Analytics 4
• Plausible Analytics
• Google Search Console

Forms & Communication:

• React Hook Form (Form validation)
• Resend (Email service)
• Slack webhook (Lead notifications)

Testing & Quality:

• Jest (Unit tests)
• React Testing Library
• Lighthouse CI (Performance monitoring)

Project Gallery

Homepage

Modern hero section with clear value proposition and CTAs

Services Page

Service cards with icons and detailed descriptions

About Us

Team members showcase with professional photos

Mobile Experience

Fully responsive design optimized for mobile devices

Need a modern corporate website? Get in touch to discuss your project.