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

Dependencies installed ✓

Configure environment variables:

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

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:

npm run dev

Visit:

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

Build & Production:

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:

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:

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

Telegram Bot Setup

Message @BotFather on Telegram
Create a bot and get token
Get your chat ID (use @userinfobot)
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)

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`

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

Sends message to Telegram via bot.

🧪 Testing

# Check for build errors
npm run build

# Check TypeScript
npm run typecheck

# Run linting
npm run lint

📚 Resources

📄 License

MIT License - feel free to use for your projects

Created: November 2025 | Status: Production Ready

README.md

FIRMA - Industrial Equipment PortfolioThis is a Next.js project bootstrapped with create-next-app.