> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Mich9025/vencol-front/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart Guide

> Get the VENCOL Front Template up and running in 5 minutes. A quick walkthrough from installation to your first customization.

# Quickstart Guide

Get your VENCOL Front Template development environment running in just 5 minutes. This guide will walk you through installation, running the dev server, and making your first customizations.

## Prerequisites

Before you begin, ensure you have:

* **Node.js 16+** installed (18.x or 20.x LTS recommended)
* A package manager: **npm**, **pnpm**, or **yarn**
* A code editor (VS Code recommended)
* Basic knowledge of React and TypeScript

## Quick Start

<Steps>
  <Step title="Clone and Install">
    Clone the repository and install dependencies:

    <CodeGroup>
      ```bash npm theme={null}
      git clone https://github.com/Mich9025/vencol-front.git
      cd vencol-front
      npm install
      ```

      ```bash pnpm theme={null}
      git clone https://github.com/Mich9025/vencol-front.git
      cd vencol-front
      pnpm install
      ```

      ```bash yarn theme={null}
      git clone https://github.com/Mich9025/vencol-front.git
      cd vencol-front
      yarn install
      ```
    </CodeGroup>

    This installs all dependencies from `package.json:11-23`:

    * React 18.3.1 and React DOM
    * React Router 6.22.3 for navigation
    * Lucide React 0.358.0 for icons
    * React Helmet Async 2.0.4 for SEO
    * Vite 6.2.0 and TypeScript 5.8.2
  </Step>

  <Step title="Start Development Server">
    Launch the Vite development server:

    <CodeGroup>
      ```bash npm theme={null}
      npm run dev
      ```

      ```bash pnpm theme={null}
      pnpm run dev
      ```

      ```bash yarn theme={null}
      yarn dev
      ```
    </CodeGroup>

    The application will start at `http://localhost:3000` (configured in `vite.config.ts:9`).

    <Note>
      The default Vite port is 5173, but this project is configured to use port 3000 for consistency with traditional React apps.
    </Note>
  </Step>

  <Step title="Explore the Application">
    Open your browser to `http://localhost:3000` and explore:

    * **Home Page** - Hero slider, features showcase, partners marquee, FAQ
    * **Nosotros** - About page with company information
    * **Soluciones** - Product catalog dropdown (5 solution categories)
    * **Blog** - WordPress-integrated blog listing
    * **Contacto** - Contact information and forms
  </Step>
</Steps>

## Project Structure Overview

Understanding the basic structure helps you navigate the codebase:

```
vencol-front/
├── components/          # Reusable UI components
│   ├── Navbar.tsx      # Navigation with dropdowns
│   ├── Footer.tsx      # Site footer
│   ├── SEO.tsx         # SEO meta tags
│   └── ui/             # Base components (GlassCard, BackgroundBlobs)
├── pages/              # Route page components
│   ├── Home.tsx        # Landing page
│   ├── About.tsx       # About page
│   ├── SolutionDetail.tsx  # Individual solution pages
│   ├── Blog.tsx        # Blog listing
│   └── Contact.tsx     # Contact page
├── data/               # Static content and configuration
│   ├── data.tsx        # Site-wide content
│   └── solutions.tsx   # Solutions catalog
├── lib/                # Utilities
│   └── wordpress.ts    # WordPress API integration
├── App.tsx             # Main app with routing
├── index.tsx           # Entry point
└── types.ts            # TypeScript definitions
```

## Your First Customization

Let's make a simple customization to see how the app works.

### 1. Update the Hero Title

Open `data/data.tsx` and find the home hero section:

```typescript data/data.tsx theme={null}
export const siteContent = {
  // ... other content
  home: {
    hero: {
      badge: "Soluciones de Empaque de Clase Mundial",
      title: {
        prefix: "Hacemos visible",
        highlight: "la frescura",
        suffix: "de tus productos"
      },
      // ... more properties
    }
  }
}
```

Change the `highlight` text to something else, save the file, and watch the browser auto-reload with your changes thanks to Vite's Hot Module Replacement (HMR).

### 2. Change Brand Colors

The brand color is defined in `index.html:22-26` within the `<style>` tag:

```html index.html theme={null}
<style type="text/tailwindcss">
  @layer utilities {
    .brand-green { color: #56B501; }
    .bg-brand-green { background-color: #56B501; }
    /* ... */
  }
</style>
```

Update `#56B501` to your preferred brand color. The change will apply across all buttons, highlights, and accents.

### 3. Add a New Solution

Add a new product to the solutions catalog by editing `data/solutions.tsx`:

```typescript data/solutions.tsx theme={null}
import { Zap } from 'lucide-react'; // Import an icon

export const solutionsData: Service[] = [
  // ... existing solutions
  {
    id: '6',
    slug: 'my-new-solution',
    title: "My New Solution",
    description: "Short description for the card",
    longDescription: "Full description for the detail page...",
    icon: Zap,
    features: [
      "Feature 1",
      "Feature 2",
      "Feature 3"
    ],
    image: "https://images.unsplash.com/photo-1234567890",
    subtitle1: "First Subtitle",
    subtitle1Description: "Description for first section",
    subtitle2: "Second Subtitle",
    subtitle2Description: "Description for second section",
    menuTitle: "My Solution"
  }
];
```

The new solution will automatically appear in the navigation dropdown and be accessible at `/soluciones/my-new-solution`.

<Tip>
  For a complete guide on adding solutions, see [Adding Solutions](/guides/adding-solutions).
</Tip>

## Available Scripts

The project includes these npm scripts from `package.json:6-9`:

| Command           | Description                                           |
| ----------------- | ----------------------------------------------------- |
| `npm run dev`     | Start development server with HMR at `localhost:3000` |
| `npm run build`   | Build production bundle to `dist/` directory          |
| `npm run preview` | Preview production build locally                      |

## Understanding the Routing

The app uses React Router 6 for client-side navigation. Routes are defined in `App.tsx:30-40`:

```tsx App.tsx theme={null}
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/nosotros" element={<About />} />
  <Route path="/soluciones/:slug" element={<SolutionDetail />} />
  <Route path="/blog" element={<Blog />} />
  <Route path="/blog/:slug" element={<BlogDetail />} />
  <Route path="/contacto" element={<Contact />} />
  {/* Catch-all for WordPress pages */}
  <Route path="/:slug" element={<PageDetail />} />
</Routes>
```

Key routes:

* **Static routes**: `/`, `/nosotros`, `/blog`, `/contacto`
* **Dynamic routes**: `/soluciones/:slug` for products, `/blog/:slug` for posts
* **Catch-all**: `/:slug` fetches WordPress pages by slug

## WordPress Integration

The app can fetch blog posts from a WordPress site via REST API. The configuration is in `lib/wordpress.ts:3`:

```typescript lib/wordpress.ts theme={null}
const WP_API_URL = 'https://cms.gobigagency.co/vencol/wp-json/wp/v2';
```

To use your own WordPress site:

1. Update the `WP_API_URL` in `lib/wordpress.ts`
2. Ensure your WordPress site has REST API enabled
3. Blog posts will automatically load from your WordPress backend

<Warning>
  If the WordPress API fails, the app gracefully falls back to static blog posts defined in `data/data.tsx`.
</Warning>

## Next Steps

Now that you have the basics running:

<CardGroup cols={2}>
  <Card title="Explore Components" icon="puzzle-piece" href="/components/overview">
    Learn about Navbar, Footer, SEO, and UI components
  </Card>

  <Card title="Understand Architecture" icon="sitemap" href="/concepts/architecture">
    Dive into the project structure and data flow
  </Card>

  <Card title="Customize Your Site" icon="palette" href="/guides/customization">
    Personalize colors, content, and branding
  </Card>

  <Card title="Deploy to Production" icon="rocket" href="/guides/deployment">
    Deploy to Vercel or Netlify in minutes
  </Card>
</CardGroup>

## Common Issues

<AccordionGroup>
  <Accordion title="Port 3000 is already in use">
    If another app is using port 3000, you can change the port in `vite.config.ts:9`:

    ```typescript vite.config.ts theme={null}
    export default defineConfig({
      server: {
        port: 3001, // Change to any available port
      },
    });
    ```
  </Accordion>

  <Accordion title="Module not found errors">
    Clear your `node_modules` and reinstall:

    ```bash theme={null}
    rm -rf node_modules package-lock.json
    npm install
    ```
  </Accordion>

  <Accordion title="TypeScript errors in editor">
    Ensure your editor uses the workspace TypeScript version. In VS Code:

    1. Open any `.tsx` file
    2. Press `Cmd/Ctrl + Shift + P`
    3. Type "Select TypeScript Version"
    4. Choose "Use Workspace Version"
  </Accordion>

  <Accordion title="WordPress blog not loading">
    The app falls back to static content if WordPress is unavailable. Check:

    1. WordPress URL is correct in `lib/wordpress.ts:3`
    2. WordPress REST API is enabled
    3. CORS is configured on WordPress (if needed)

    See [WordPress Setup Guide](/guides/wordpress-setup) for details.
  </Accordion>
</AccordionGroup>

## Getting Help

* **Documentation**: Browse the full docs for detailed guides
* **Source Code**: Explore `~/workspace/source/` for implementation details
* **GitHub**: Report issues at [github.com/Mich9025/vencol-front](https://github.com/Mich9025/vencol-front)

<Card title="Ready to dive deeper?" icon="book">
  Check out the [Core Concepts](/concepts/architecture) to understand the full architecture.
</Card>