new web sayt
This commit is contained in:
nabijonovdavronbek619@gmail.com
248
README.md
248
README.md
@@ -1,36 +1,242 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# 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).
|
||||
|
||||
## Getting Started
|
||||
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
|
||||
|
||||
First, run the development server:
|
||||
## 🚀 FeaturesFirst, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
- **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.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
- **Framework**: Next.js 15+ (App Router)
|
||||
|
||||
This 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.
|
||||
- **Language**: TypeScriptYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
## Learn More
|
||||
- **Styling**: TailwindCSS
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
- **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.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
## 📦 Quick Start- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The 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.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
### 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
|
||||
|
||||
Reference in New Issue
Block a user