Skip to main content

​
Quickstart

Get your Product Builders landing page up and running in just a few minutes.

​
Prerequisites

Before you begin, make sure you have:
  • Node.js 20+ installed on your machine
  • npm, yarn, or pnpm package manager
  • A code editor (VS Code recommended)
  • Git for version control

​
Setup steps

1

Clone the repository

Clone the repository to your local machine:
git clone https://github.com/alvapr0g/landing.git
cd landing
2

Install dependencies

Install all required packages using your preferred package manager:
npm install
This will install all dependencies including:
  • Next.js 15.5.9
  • React 19.2.1
  • Tailwind CSS 3.4.1
  • shadcn/ui components
  • Resend for email
3

Set up environment variables

Create a .env.local file in the root directory:
touch .env.local
Add your Resend API key:
RESEND_API_KEY=re_your_api_key_here
The contact form requires a valid Resend API key to function. Get one free at resend.com.
4

Start the development server

Run the development server with Turbopack:
npm run dev
The server will start on port 9002 by default:
▲ Next.js 15.5.9
- Local:        http://localhost:9002
- Turbopack:    enabled
5

Open in browser

Navigate to http://localhost:9002 in your browser.You should see the Product Builders landing page with:
  • Hero section with headline and image
  • Services section showing three services
  • Offerings section with five programs
  • Contact form for lead generation

​
Project structure

Here’s a quick overview of the key files: 
landing/
├── src/
│   ├── app/
│   │   ├── page.tsx           # Main landing page
│   │   ├── layout.tsx         # Root layout
│   │   └── actions.ts         # Server actions (contact form)
│   ├── components/
│   │   ├── hero-section.tsx   # Hero banner
│   │   ├── services-section.tsx
│   │   ├── offerings-section.tsx
│   │   ├── contact-form.tsx
│   │   ├── header.tsx
│   │   └── footer.tsx
│   ├── dictionaries/          # i18n translations
│   │   ├── es.json           # Spanish (default, configured)
│   │   ├── en.json           # English (configured)
│   │   └── ru.json           # Russian (available, not configured)
│   └── lib/
│       └── data.ts           # Services and offerings data
├── tailwind.config.ts        # Tailwind configuration
├── next.config.ts            # Next.js configuration
└── package.json

​
Customize content

The landing page content is defined in several places:

​
Page content

Edit src/app/page.tsx to customize offerings:
src/app/page.tsx
const offeringsContent = {
  items: {
    intensive: {
      title: "Intensivo de producto digital",
      description: "Consultoría de 4 semanas para definir la estrategia de producto.",
      duration: "4 Semanas",
    },
    // Add or modify offerings here
  },
};

​
Services and offerings metadata

Edit src/lib/data.ts to modify service icons and IDs:
src/lib/data.ts
export const servicesMeta: ServiceMeta[] = [
  { id: "strategy", icon: Presentation },
  { id: "mentorship", icon: GraduationCap },
  { id: "optimization", icon: TrendingUp },
];

​
Translations

Modify translations in the configured dictionary files (src/dictionaries/es.json or en.json):
src/dictionaries/es.json
{
  "hero": {
    "title": "Construimos y escalamos productos digitales de alto impacto.",
    "description": "En Product Builders te ayudamos..."
  }
}

​
Test the contact form

To test the contact form:
  1. Make sure RESEND_API_KEY is set in .env.local
  2. Navigate to the contact section
  3. Fill out the form with:
    • Valid email address
    • Select a service
    • Enter a message (minimum 10 characters)
  4. Click “Enviar Formulario”
You should see a success toast notification.
For testing without a real API key, you can modify src/app/actions.ts to skip email sending and return a success response.

​
Next steps

Customize theming

Modify colors, fonts, and styling

Add languages

Set up additional language translations

Deploy to Firebase

Deploy to Firebase App Hosting

Deploy to Netlify

Deploy to Netlify in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us