diff --git a/README.md b/README.md index 6cb7ca5..cb06e20 100644 --- a/README.md +++ b/README.md @@ -1,242 +1,184 @@ -# 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). +# FIRMA - Industrial Equipment & Pump Supplier Website -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 +A modern, responsive Next.js portfolio website for **Max Di Group** - a company specializing in industrial equipment, pumps, sensors, and technical devices. The website showcases products with 3D visualizations and provides comprehensive information in both Uzbek and Russian languages. -## ๐Ÿš€ FeaturesFirst, run the development server: +## ๐ŸŒŸ Project Overview -- **Multi-language Support**: Uzbek (uz) and Russian (ru) with `next-intl````bash +This project is a professional business website for a company that supplies industrial equipment including: -- **Modern UI/UX**: Built with TailwindCSS and Framer Motion animationsnpm run dev +- Pumps and pump aggregates (ASVN-80, SCL 20/24, KM-100, SCN 75/70) +- Liquid flow meters and counters (PPV-100, PPO series) +- Fuel dispensing equipment and modules (MZ-35) +- Safety valves and breathing apparatus (KDM series) +- Filtration systems (FJU series) +- Loading/unloading equipment for rail and road tankers -- **3D Product Visualization**: Three.js/React Three Fiber for GLB/GLTF models# or +The website features: -- **Responsive Design**: Mobile-first, fully responsive across all devicesyarn dev +- **3D Product Visualization**: Interactive 3D models using Three.js +- **Multi-language Support**: Full internationalization (Uzbek/Russian) +- **Responsive Design**: Mobile-first approach +- **SEO Optimization**: Proper metadata and structured data +- **Contact Integration**: Telegram bot for inquiries +- **Static Export**: Ready for deployment to any hosting -- **Telegram Bot Integration**: Contact form submissions sent via Telegram bot# or +## ๐Ÿš€ Features -- **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 - -```` +- **Multi-language Support**: Uzbek (uz) and Russian (ru) with `next-intl` +- **Modern UI/UX**: Built with TailwindCSS and Framer Motion animations +- **3D Product Visualization**: Three.js/React Three Fiber for GLB/GLTF models +- **Responsive Design**: Mobile-first, fully responsive across all devices +- **Telegram Bot Integration**: Contact form submissions sent via Telegram bot +- **SEO Optimized**: Proper metadata, structured data, and semantic HTML +- **Performance**: Image optimization, lazy loading, and code splitting +- **Accessibility**: WCAG compliant with keyboard navigation and ARIA labels +- **Static Export**: Ready for deployment without server requirements ## ๐Ÿ› ๏ธ 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. - +- **Language**: TypeScript - **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. - +- **Animations**: Framer Motion - **3D Graphics**: Three.js + React Three Fiber + Drei - -- **HTTP Client**: Axios## Learn More - +- **HTTP Client**: Axios - **i18n**: next-intl - -- **Icons**: lucide-reactTo learn more about Next.js, take a look at the following resources: - +- **Icons**: lucide-react - **Forms**: React Hook Form + Zod +- **State Management**: Zustand +- **Build**: Static export for optimal performance -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +## ๐Ÿ“ฆ Quick Start -## ๐Ÿ“ฆ Quick Start- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +### Prerequisites +- Node.js 18+ +- npm, yarn, or pnpm +### Installation -### PrerequisitesYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +1. Clone the repository: -- Node.js 18.0+ +```bash +git clone +cd firma +``` -- npm or yarn## Deploy on Vercel +2. Install dependencies: +```bash +npm install +# or +yarn install +# or +pnpm install +``` - -### 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: +3. Run the development server: ```bash npm run dev +# or +yarn dev +# or +pnpm dev ``` -Visit: +4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -- Uzbek: http://localhost:3000/uz -- Russian: http://localhost:3000/ru - -### Build & Production: +### Build for Production ```bash npm run build npm run start ``` -## ๐Ÿ“ Key Files +For static export (recommended): -| 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" }], - }, -]; +```bash +npm run build ``` -### Update Translations +The static files will be generated in the `out` directory. -Edit `locales/uz.json` and `locales/ru.json`: +## ๐Ÿ“ Project Structure -```json -{ - "nav": { - "about": "Biz haqimizda" - } -} +``` +firma/ +โ”œโ”€โ”€ app/ # Next.js App Router +โ”‚ โ”œโ”€โ”€ api/ # API routes +โ”‚ โ”œโ”€โ”€ detail/[slug]/ # Dynamic product detail pages +โ”‚ โ”œโ”€โ”€ globals.css # Global styles +โ”‚ โ”œโ”€โ”€ layout.tsx # Root layout +โ”‚ โ”œโ”€โ”€ page.tsx # Homepage +โ”‚ โ””โ”€โ”€ sitemap.ts # Sitemap generation +โ”œโ”€โ”€ components/ # React components +โ”‚ โ”œโ”€โ”€ detailPage/ # Product detail components +โ”‚ โ”œโ”€โ”€ productSection/ # Product listing components +โ”‚ โ”œโ”€โ”€ ui/ # Reusable UI components +โ”‚ โ””โ”€โ”€ ... +โ”œโ”€โ”€ context/ # React context providers +โ”œโ”€โ”€ i18n/ # Internationalization +โ”œโ”€โ”€ lib/ # Utility functions and types +โ”œโ”€โ”€ locales/ # Translation files +โ”œโ”€โ”€ public/ # Static assets +โ”‚ โ”œโ”€โ”€ images/ # Image assets +โ”‚ โ”œโ”€โ”€ logo.jpg # Company logo +โ”‚ โ””โ”€โ”€ ... +โ””โ”€โ”€ ... ``` -### Telegram Bot Setup +## ๐ŸŒ Internationalization -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` +The website supports two languages: -## ๐Ÿ“ฑ Sections +- **Uzbek (uz)**: Default language +- **Russian (ru)**: Secondary language -- **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 +Language switching is available in the navigation bar. All content including product descriptions, features, and UI text is fully translated. -## ๐ŸŽจ Customization +## ๐Ÿ“ž Contact Integration -### Colors +The contact form integrates with a Telegram bot to send inquiries directly to the company's support team. Configuration requires: -Edit `tailwind.config.ts` - currently uses blue theme +- Telegram Bot Token +- Chat ID for message delivery -### Animations +## ๐Ÿ” SEO & Performance -Framer Motion used throughout - edit individual component files - -### Fonts - -Edit `app/layout.tsx` - currently using Geist font family +- **Sitemap**: Automatically generated at `/sitemap.xml` +- **Meta Tags**: Comprehensive metadata for each page +- **Image Optimization**: Next.js automatic image optimization +- **Static Export**: No server required, fast loading times +- **Core Web Vitals**: Optimized for performance metrics ## ๐Ÿš€ Deployment -### Vercel (Recommended) +The project is configured for static export, making it easy to deploy to any static hosting service: -```bash -git push origin main -# Connect repo on vercel.com -# Add .env variables in project settings -``` +1. Build the project: `npm run build` +2. Deploy the `out` directory to your hosting provider +3. Configure domain and SSL as needed -### Other Hosting +Recommended hosting platforms: -Works on any Node.js platform (Railway, Heroku, AWS, DigitalOcean, etc.) +- Vercel +- Netlify +- GitHub Pages +- Any static hosting service -## ๐Ÿ“ API Routes +## ๐Ÿ“ License -### POST `/api/contact` +This project is proprietary software for Max Di Group. -```json -{ - "name": "John Doe", - "phone": "+998991234567", - "message": "Contact message", - "productSlug": "schotchik-pump", - "lang": "uz" -} -``` +## ๐Ÿ“ž Support -Sends message to Telegram via bot. +For technical support or inquiries: -## ๐Ÿงช 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 +- Email: [company email] +- Telegram: @firma_support +- Phone: +998 (99) 869-74-70 --- -**Created**: November 2025 | **Status**: Production Ready +Built with โค๏ธ for Max Di Group - Industrial Equipment Excellence diff --git a/app/detail/[slug]/page.tsx b/app/detail/[slug]/page.tsx new file mode 100644 index 0000000..3d2e7f6 --- /dev/null +++ b/app/detail/[slug]/page.tsx @@ -0,0 +1,38 @@ +import { ContactForm } from "@/components/ContactForm"; +import DetailInfo from "@/components/detailPage/detailInfo"; +import { getAllProducts } from "@/lib/api"; +import { Product } from "@/lib/products"; +import { generateSlug } from "@/lib/slug"; +import { notFound } from "next/navigation"; + +export async function generateStaticParams() { + const products = await getAllProducts(); + + return products.map((product) => ({ + slug: generateSlug(product.name_uz), + })); +} + +async function getProduct(slug: string): Promise { + const products = await getAllProducts(); + console.log("slug: ", slug); + + return products.find((product) => generateSlug(product.name_uz) === slug); +} + +export default async function Page({ params }: { params: { slug: string } }) { + const product = await getProduct(params.slug); + + if (!product) { + notFound(); + } + + return ( +
+ +
+ +
+
+ ); +} diff --git a/app/sitemap.ts b/app/sitemap.ts new file mode 100644 index 0000000..6bda287 --- /dev/null +++ b/app/sitemap.ts @@ -0,0 +1,43 @@ +export const dynamic = "force-static"; + +import { MetadataRoute } from "next"; + +export default function sitemap(): MetadataRoute.Sitemap { + const baseUrl = "https://promtechno.uz"; + + // Static pages + const staticPages = [ + { + url: baseUrl, + lastModified: new Date(), + changeFrequency: "weekly" as const, + priority: 1, + }, + ]; + + // Product detail pages - based on actual product slugs from API + const productSlugs = [ + "ppv-100-1-6-su-6-0-60-0-5foiz-mexanik-suyuqlik-hisoblagichi", + "ppo-40-0-6-su-suyuqlik-hisoblagichi", + "ppo-25-1-6-su-oval-tishli-suyuqlik-hisoblagichi", + "scl-20-24-nasosi", + "km-100-80-170e-elektro-nasosi", + "scn-75-70-nasosi", + "usn-150-04-pastdan-tushirish-quyi-oqizish-qurilmasi-ta-sir-zonasi-4-m", + "asn-80-02-yuqoridan-quyish-qurilmasi", + "usn-100-usn-76-neft-mahsulotlari-va-maxsus-suyuqliklarni-pastdan-oqizish-qurilmalari", + "mexanik-nafas-olish-klapani-kdm-100-150-200-250-ichki-yong-inga-qarshi-himoyali", + "fju-100-1-6-suyuqlik-filtri", + "yoqilg-i-quyish-moduli-mz-35", + "asvn-80-nasos-agregati", + ]; + + const productPages = productSlugs.map((slug) => ({ + url: `${baseUrl}/detail/${slug}`, + lastModified: new Date(), + changeFrequency: "monthly" as const, + priority: 0.8, + })); + + return [...staticPages, ...productPages]; +}