Documentation

Project Structure

This project follows the Next.js 13+ App Router structure. Here's an overview of the main directories:

webocreation-nextjs/
├── public/            # Static assets
├── src/
│   ├── app/           # App Router pages and layouts
│   │   ├── about/     # About page
│   │   ├── ads-services/ # Ads Services page
│   │   ├── brand-identity-design/ # Brand Identity Design page
│   │   ├── careers/   # Careers page
│   │   ├── contact/   # Contact page
│   │   ├── docs/      # Documentation page
│   │   ├── social-media-promotion/ # Social Media Promotion page
│   │   ├── layout.tsx # Root layout
│   │   └── page.tsx   # Home page
│   ├── components/    # Reusable components
│   │   ├── ProcessSteps.tsx # Process steps component
│   │   └── ... other components
│   ├── utils/         # Utility functions
│   └── styles/        # Global styles
├── .env.example       # Example environment variables
├── .env.local         # Local environment variables (create this)
├── next.config.js     # Next.js configuration
├── package.json       # Dependencies and scripts
├── postcss.config.js  # PostCSS configuration
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json      # TypeScript configuration

Components

The project includes several reusable components. Here are the key ones:

ProcessSteps

A versatile component for displaying process steps in various formats (timeline, cards, vertical).

// Example usage
import ProcessSteps from '@/components/ProcessSteps';

<ProcessSteps 
  title="Our Process"
  subtitle="A systematic approach to success"
  variant="timeline" // Options: "timeline", "cards", "vertical"
  accentColor="orange" // Primary color for the component
  steps={[
    {
      title: "Step 1: Discovery",
      description: "Detailed description of the first step."
    },
    {
      title: "Step 2: Strategy",
      description: "Detailed description of the second step."
    },
    // Add more steps as needed
  ]}
/>

CalendlyWidget

A component for embedding Calendly scheduling into your pages.

// Example usage in contact-form.tsx
// The component uses the NEXT_PUBLIC_CALENDLY_URL environment variable
// Make sure to set this in your .env.local file

// If the Calendly URL is defined, the widget will be displayed
// If not, the section will be hidden

Component List

A comprehensive list of all available components in the project. Each component includes a description, props, and usage examples.

HeroSection

A flexible hero section component that supports two layout modes: split layout with image and slanted edge, or full-width gradient background.

Props

• title: Main heading text
• description: Descriptive text
• imageSrc: Optional image URL
• titleBreak: Whether to break title into two lines
• gradientFrom/gradientTo: Gradient color classes

View Documentation →

ProcessSteps

A versatile component for displaying process steps in various formats: timeline, cards, or vertical.

Props

• title: Section title
• subtitle: Descriptive subtitle
• steps: Array of step objects
• variant: Layout style (default, cards, timeline, vertical)
• accentColor: Primary color theme

View Documentation →

BlogSection

Displays a grid of blog posts with featured images, titles, excerpts, and metadata.

Props

• title: Section title
• subtitle: Descriptive subtitle
• posts: Array of post objects
• layout: Grid layout style
• showViewAllLink: Whether to show "View All" link

View Documentation →

CommentSection

Displays and manages comments for blog posts, with support for nested replies and form validation.

Props

• postId: WordPress post ID
• comments: Array of comment objects
• onCommentSubmit: Callback function
• allowReplies: Whether to allow nested replies

View Documentation →

FaqSection

Displays a list of frequently asked questions with expandable answers using accordion functionality.

Props

• title: Section title
• subtitle: Descriptive subtitle
• faqs: Array of FAQ objects
• layout: Layout style (default, columns, grid)

View Documentation →

TrustedCompanies

Displays a logo carousel of trusted companies or clients with optional animation.

Props

• title: Section title
• companies: Array of company objects with logos
• animated: Whether to animate the logos
• grayscale: Whether to display logos in grayscale

View Documentation →

Note: The component screenshots are placeholders. To add actual screenshots, create an /images/docs/ directory in the public folder and add images for each component.

Elements

Individual UI elements and blocks that can be used throughout the project:

// Example usage
import Accordion from '@/components/elements/Accordion';

<Accordion 
  items={[
    {
      title: 'Section 1',
      content: 'Content for section 1 goes here.'
    },
    {
      title: 'Section 2',
      content: 'Content for section 2 goes here.'
    }
  ]}
  allowMultiple={false} // Set to true to allow multiple sections open at once
  defaultOpen={0} // Index of the section that should be open by default
/>

Pages

The project includes several pre-built pages:

• Home Page - The main landing page at /
• About Page - Company information at /about
• Ads Services - Advertising services at /ads-services
• Brand Identity Design - Branding services at /brand-identity-design
• Social Media Promotion - Social media services at /social-media-promotion
• Careers - Job listings at /careers
• Contact - Contact form with Calendly integration at /contact
• Documentation - This documentation page at /docs

Each page is built using the App Router structure and includes metadata for SEO.

Styling

This project uses Tailwind CSS for styling. The main configuration is in tailwind.config.js.

Color Scheme

The primary color scheme uses orange as the accent color. You can customize this in the Tailwind configuration.

Responsive Design

All components and pages are designed to be fully responsive, using Tailwind's responsive utilities.

Brand Guide Changes

Replace Webocreation

Replace "Webocreation" with "Your Name" of your brand guide.

Replace bg-orange-600 and bg-orange-50 to your color

Replace "bg-orange-600" and "bg-orange-50" with "Your Color" of your brand guide.

Environment Variables

The project uses environment variables for configuration. Create a .env.local file in the root directory with the following variables:

# Calendly integration
NEXT_PUBLIC_CALENDLY_URL=your_calendly_url_here

# Add other environment variables as needed

Deployment

This Next.js project can be deployed to various platforms. Here are instructions for the most common ones:

Vercel (Recommended)

Vercel is the easiest way to deploy your Next.js app:

1. Sign up for a Vercel account at vercel.com
2. Install the Vercel CLI: npm i -g vercel
3. Run vercel from the project root
4. Follow the prompts to deploy your project

Netlify

To deploy on Netlify:

1. Sign up for a Netlify account at netlify.com
2. Click "New site from Git"
3. Connect to your repository
4. Set the build command to npm run build
5. Set the publish directory to .next
6. Add your environment variables in the Netlify dashboard

Troubleshooting

Here are solutions to common issues you might encounter:

Module not found errors

If you see errors about missing modules, ensure you've installed all dependencies:

npm install

Calendly widget not showing

If the Calendly widget isn't displaying on the contact page, check that you've set the NEXT_PUBLIC_CALENDLY_URL environment variable in your .env.local file.

Build errors

If you encounter build errors, try clearing the Next.js cache:

rm -rf .next

Then rebuild the project:

npm run build