# FIRMA - Industrial Equipment PortfolioThis is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

A modern, responsive Next.js portfolio website for an industrial equipment and pump supplier company. Built with TypeScript, TailwindCSS, Framer Motion, Three.js/R3F, and internationalization support (Uzbek/Russian).## Getting Started

## 🚀 FeaturesFirst, run the development server:

- **Multi-language Support**: Uzbek (uz) and Russian (ru) with `next-intl````bash

- **Modern UI/UX**: Built with TailwindCSS and Framer Motion animationsnpm run dev

- **3D Product Visualization**: Three.js/React Three Fiber for GLB/GLTF models# or

- **Responsive Design**: Mobile-first, fully responsive across all devicesyarn dev

- **Telegram Bot Integration**: Contact form submissions sent via Telegram bot# or

- **SEO Optimized**: Proper metadata, structured data, and semantic HTMLpnpm dev

- **Performance**: Image optimization, lazy loading, and code splitting# or

- **Accessibility**: WCAG compliant with keyboard navigation and ARIA labelsbun dev

````

## 🛠️ Tech Stack

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

- **Framework**: Next.js 15+ (App Router)

- **Language**: TypeScriptYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

- **Styling**: TailwindCSS

- **Animations**: Framer MotionThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

- **3D Graphics**: Three.js + React Three Fiber + Drei

- **HTTP Client**: Axios## Learn More

- **i18n**: next-intl

- **Icons**: lucide-reactTo learn more about Next.js, take a look at the following resources:

- **Forms**: React Hook Form + Zod

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

## 📦 Quick Start- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.



### PrerequisitesYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

- Node.js 18.0+

- npm or yarn## Deploy on Vercel



### SetupThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.



1. **Navigate to project** (already done):Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

   ```bash
   cd /home/zero/Projects/felix/firma
````

2. **Dependencies installed** ✓

3. **Configure environment variables**:

   ```bash
   # Edit .env.local
   TELEGRAM_BOT_TOKEN=your_token_here
   TELEGRAM_CHAT_ID=your_chat_id_here
   NEXT_PUBLIC_SITE_URL=http://localhost:3000
   ```

4. **Add product images to `public/images/`**:
   - `hero-pump-1.jpg` through `hero-pump-5.jpg`
   - `pump-1.jpg`, `pump-1-alt.jpg`
   - `pump-2.jpg`, `pump-2-alt.jpg`
   - `pump-3.jpg`, `pump-3-alt.jpg`

## 🚀 Running the Project

### Development:

```bash
npm run dev
```

Visit:

- Uzbek: http://localhost:3000/uz
- Russian: http://localhost:3000/ru

### Build & Production:

```bash
npm run build
npm run start
```

## 📁 Key Files

| File                          | Purpose                           |
| ----------------------------- | --------------------------------- |
| `app/[locale]/page.tsx`       | Home page template                |
| `components/Navbar.tsx`       | Navigation with language switcher |
| `components/ShowCase.tsx`     | Hero section with image carousel  |
| `components/ProductsGrid.tsx` | Product grid and modal            |
| `components/ContactForm.tsx`  | Contact form with Telegram        |
| `lib/products.ts`             | Product data and types            |
| `locales/uz.json`             | Uzbek translations                |
| `locales/ru.json`             | Russian translations              |
| `app/api/contact/route.ts`    | Telegram API endpoint             |
| `middleware.ts`               | i18n routing middleware           |

## 🔧 Configuration

### Add/Edit Products

Edit `lib/products.ts`:

```typescript
export const products: Product[] = [
  {
    id: "1",
    nameKey: "products_list.pump_1.name",
    slug: "schotchik-pump",
    shortDescriptionKey: "products_list.pump_1.shortDescription",
    images: ["/images/pump-1.jpg"],
    specs: [{ key: "Flow Rate", value: "100 L/min" }],
  },
];
```

### Update Translations

Edit `locales/uz.json` and `locales/ru.json`:

```json
{
  "nav": {
    "about": "Biz haqimizda"
  }
}
```

### Telegram Bot Setup

1. Message [@BotFather](https://t.me/BotFather) on Telegram
2. Create a bot and get token
3. Get your chat ID (use [@userinfobot](https://t.me/userinfobot))
4. Add to `.env.local`

## 📱 Sections

- **Navbar**: Logo, navigation links, language switcher, mobile menu
- **Hero**: Title, subtitle, CTA, image carousel with autoplay
- **About**: Company info, features, stats
- **Products**: Grid of product cards with modal details
- **FAQ**: 3 collapsible Q&A items
- **Contact**: Form with name, phone, message, product selection
- **Footer**: Links, social media, copyright

## 🎨 Customization

### Colors

Edit `tailwind.config.ts` - currently uses blue theme

### Animations

Framer Motion used throughout - edit individual component files

### Fonts

Edit `app/layout.tsx` - currently using Geist font family

## 🚀 Deployment

### Vercel (Recommended)

```bash
git push origin main
# Connect repo on vercel.com
# Add .env variables in project settings
```

### Other Hosting

Works on any Node.js platform (Railway, Heroku, AWS, DigitalOcean, etc.)

## 📝 API Routes

### POST `/api/contact`

```json
{
  "name": "John Doe",
  "phone": "+998991234567",
  "message": "Contact message",
  "productSlug": "schotchik-pump",
  "lang": "uz"
}
```

Sends message to Telegram via bot.

## 🧪 Testing

```bash
# Check for build errors
npm run build

# Check TypeScript
npm run typecheck

# Run linting
npm run lint
```

## 📚 Resources

- [Next.js Docs](https://nextjs.org/docs)
- [next-intl](https://next-intl-docs.vercel.app/)
- [Framer Motion](https://www.framer.com/motion/)
- [Three.js](https://threejs.org/)
- [TailwindCSS](https://tailwindcss.com/)

## 📄 License

MIT License - feel free to use for your projects

---

**Created**: November 2025 | **Status**: Production Ready