Skip to content
Anton GoncharovAI systems developer
RUEN

Next.js website · B2B, multi-page

Manufacturing company website

A B2B client won’t leave a request until they understand the price range and see that the company has done something similar. Usually they call a manager for that — and leave for those who have the answer on their website. Here it’s the other way round: the calculator shows the price of a warehouse or workshop in a minute, accounting for snow load in the client’s city, the drawing changes with the sliders, and one button turns the estimate into a specification the engineer uses to give a fixed price. Around it is what procurement and tender departments need: case studies with numbers, company details in one click, vacancies and a blog.

Scenario: Opora plant in Chelyabinsk — fictional: four areas (warehouses, workshops, agricultural complexes, sports and retail), eight case studies, five vacancies, blog articles, company details and snow regions for twelve cities.

Demo screenshot: Manufacturing company website

Open the demo

Open the website

Press Ctrl+K on any page to open site search.

Leads from the demo website are visible only to you, in the “Owner dashboard”: the server validates the form and stores nothing.

What the demo shows

  • Building calculator: type, span, length, height, city (snow region and delivery), walls, overhead crane, gates, foundation and installation — price, steel weight, timeline and a cost breakdown instantly

  • An isometric drawing of the building changes with the parameters; “Cladding” and “Frame” modes show frames, bracing and the crane

  • The estimate is stored in the link: share it, send it to an engineer or move it into a specification with one button

  • A four-step specification builder: the document assembles on the right, can be downloaded as Markdown, printed to PDF or sent; the site tells you what’s missing for a fixed price

  • Site search with Ctrl+K: “hangar” finds warehouses and workshops, “hockey rink” finds the ice arena, “welder job” finds the vacancy

  • Case studies with filters by industry and area, sorting and totals by floor area and steel; the filter is kept in the link

  • Vacancies with an application form and CV upload: the server checks the file format, size and signature — a renamed .exe won’t pass

  • A blog with a table of contents and reading time, company details with copying and a company card, FAQs

  • Organization, Service, JobPosting, Article and FAQPage structured data and breadcrumbs on every page

  • Owner dashboard: leads from all forms with UTM and statuses, Excel export, analytics goals, Core Web Vitals and an SEO check

How to try it

  1. Price a building

    “Calculator” in the menu: choose “Workshop”, a 30 m span, a 10 t crane and the city of Perm. The price and steel weight grow because of snow and the crane; switch the drawing to “Frame”.

  2. Turn the estimate into a specification

    The “To specification” button carries over the dimensions. Describe the purpose and choose a deadline — the “missing” warning turns green. Download the document or send it.

  3. Search by meaning

    Press Ctrl+K and type “hockey rink” or “machinery hangar in Perm”. Search finds a case study, an area or the calculator even though those words aren’t on the pages.

  4. Apply for a job

    In “Careers”, expand “Certified welder” and press “Apply”. Attach a PDF CV — then try slipping in an image with a .pdf extension.

  5. Open the owner dashboard

    The button in the top bar: the estimate, specification and application are in the “Leads” tab with the estimate text, and every step is in “Goals”.

No paid neural networks

There are no paid neural network requests: site search is a keyword index with synonyms and word forms; in production, vector search takes its place. Forms and the CV file are genuinely validated on the server, but nothing is stored: the lead is returned to your browser and visible only to you in the “Owner dashboard”. The calculator prices are a plausible model, not a real plant’s price list.

The demo runs without OpenAI, YandexGPT or GigaChat API keys. Wherever a production system calls a model, there’s a local stub with the same interface — so the demo is free, always available and never makes things up.

What a production project adds

  • Leads with the estimate and specification go to amoCRM or Bitrix24 with an assigned engineer and a Telegram notification; CVs go to Huntflow or Potok
  • A calculator on the plant’s real coefficients: steel and panel prices from 1C, steel weight norms from the design team
  • Vector search over the site and knowledge base on embeddings (YandexGPT or GigaChat), answers with sources
  • Content in an admin panel (Payload or Strapi): case studies, vacancies and articles without a developer, vacancies exported to hh.ru
  • Yandex Metrica with goals, call tracking and a report on how many leads the calculator and specification builder brought

Stack

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Server Actions

Developer’s comment

Anton Goncharov

AI systems developer · Python

For business

  • Customers see the price range before calling, so the people who call are those the price suits — managers don’t waste time on “just asking”.
  • A lead arrives with a ready estimate or brief: the engineer makes a sketch right away instead of finding out dimensions over the phone.
  • Case studies, company details and vacancies answer questions from procurement, tender departments and job seekers without separate emails.

For developers

  • Next.js 16 App Router: service, case and article pages are built statically via generateStaticParams; the calculator and filters read parameters from the URL inside Suspense.
  • The drawing is a pure function of isometric geometry (spans, frames, gates, crane) rendered as SVG without libraries; the estimate, brief and search are covered by unit tests.
  • The job application with a file is a Server Action with FormData: the server checks the extension, size and the signature of the file’s first bytes.

Tips

  • Tip 01

    Show in the calculator what the price is made of: a breakdown by item builds more trust than a single “from” figure.

  • Tip 02

    Keep the calculator state in the URL — the client’s manager forwards the estimate to the director, who opens exactly the same thing.

Want the same for your business?

Tell me about your task — I’ll tell you what from the demo fits, how long it will take and what I’ll need from you.

Message me on TelegramSend a request

Other demos in this section

All demos

  • Next.js website · service landing page

    live

    Dental clinic landing page

    A one-page clinic website that brings in patients: a quiz suggests a treatment, a calculator prices the plan with installments, online booking shows doctors’ free time, and an AI consultant answers from the price list. The headline is A/B-tested; leads and goals are visible in the owner dashboard.

    • Next.js
    • React
    • TypeScript

  • Next.js website · catalog, map, comparison

    live

    Real estate catalog with smart search

    A real estate agency’s apartment catalog: type “two-bedroom near the metro under 12 million” and the search sets the filters itself, shows apartments on a city map, compares up to four and sends new ones to Telegram.

    • Next.js
    • React
    • TypeScript

  • Next.js website · AI translation, per-language SEO

    live

    An export website in four languages

    A website for an Altai honey exporter in Russian, English, Chinese and Arabic: translated page URLs, per-language SEO, a wholesale price calculator with delivery and a translation studio that checks the neural network’s draft against a glossary.

    • Next.js
    • React
    • TypeScript

  • Next.js website · customer account, AI assistant, Telegram

    live

    Customer account portal

    A print shop’s customer account: orders with production stages, layout approval with comments right on the layout, invoices paid via SBP, documents with an electronic signature, a new order with a price calculation, a chat with an AI assistant and a manager, notifications in Telegram.

    • Next.js
    • React
    • TypeScript

  • Next.js website · Python in the browser, AI mentor

    live

    Online school with a student account

    An online analytics school: a landing page with a Python task checked right in the browser, a level test with a personal curriculum, installments with a tax deduction estimate, a student account with homework and AI review, an AI mentor that answers from course materials and a certificate verified by QR code.

    • Next.js
    • React
    • TypeScript

  • Next.js website · booking by plate number, photo report, approval

    live

    Car service with booking and repair status

    A car service website: booking by plate number or VIN into free bay slots, a “what’s knocking?” diagnosis with likely causes and a price range, repair status with a photo report, approval of extra work and payment by link, and a garage with service history and a forecast of the next maintenance.

    • Next.js
    • React
    • TypeScript

  • Next.js website · case analysis, claim letters, calculators

    live

    Law firm with AI case analysis

    A law firm website: describe your situation in your own words right in the hero, get an AI analysis with an assessment of prospects, a claim letter in Word, court fee, penalty and limitation period calculators, a document checklist, case progress in a client account, a price builder and booking with a lawyer.

    • Next.js
    • React
    • TypeScript

  • Next.js SaaS website · sandbox, dashboard, API

    live

    SaaS: AI replies to WB and Ozon reviews

    The website and dashboard of a SaaS service that replies to Wildberries and Ozon reviews: a sandbox with review analysis and checks, autopilot by rating, a queue with approval, topic analytics, plans with a payback calculator, store connection by key, an invoice by tax ID and API documentation with a live console.

    • Next.js
    • React
    • TypeScript

  • Next.js restaurant website · menu, table booking, delivery

    live

    Restaurant with delivery

    A restaurant website with delivery: a menu with allergen and diet filters, AI dinner selection from a plain phrase, table booking on a floor plan showing free tables for the chosen time, a cart with delivery zones, a minimum order and promo codes, and order tracking with the courier on a map.

    • Next.js
    • React
    • TypeScript

  • Next.js fitness studio website · booking, memberships, account

    live

    Fitness studio

    A small-group fitness studio website: a weekly schedule with spots and two-click booking, a waiting list that moves you into the group automatically, memberships you can freeze from your account, an AI 4-week training plan from five questions and a personal account with attendance stats.

    • Next.js
    • React
    • TypeScript

  • Next.js IT conference website · program, tickets, networking

    live

    Conference website

    A two-day conference website: a program by room and track with a personal schedule, AI selection of talks without overlaps by role and free text, tickets in price waves with promo codes and a team discount, a QR code for every attendee checked at the entrance, and networking with matching and meetings during breaks.

    • Next.js
    • React
    • TypeScript

  • Next.js corporate logistics website · calculator, tracking, AI request

    live

    Transport company website

    A transport company’s corporate website: a calculator that compares groupage and a dedicated truck at once, shipment tracking with the truck on a map, AI parsing of a request from an email or waybill with missing fields highlighted, a map of warehouses and terminals with a storage calculation, a carrier application with an eligibility check, and company details with checksum validation.

    • Next.js
    • React
    • TypeScript