243 lines
6.5 KiB
Markdown
243 lines
6.5 KiB
Markdown
# 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
|