Project Overview

PolyTek is built for a company that does two jobs: custom plastic manufacturing (injection moulding, extrusion and tooling) and wholesale polymer distribution (bulk resin pellets and masterbatches). Most templates cover only one of these. PolyTek presents both on a single, clean page and turns interested visitors into quote requests.

The design pairs a deep navy with a warm coral-orange and an ice-blue background tint, set in heavy Montserrat headlines. Visitors scroll from a blueprint-style hero through client logos, the company story, services, a Why Choose Us section with progress bars, a stats counter, the team, a product portfolio, news and testimonials, ending at a wholesale contact desk. The standout feature is the instant RFQ cost calculator, which gives buyers a price estimate before they even talk to sales.

Technical Implementation

Architecture

PolyTek is a single-page React application built with Vite. App.tsx arranges the sections in order and owns the state for the two global modals: the RFQ calculator and the video tour. Any "Get a Quote" button, including the one on each service card, opens the calculator, and service cards pre-select their own service:

const handleOpenQuoteModal = (serviceId?: string) => {
  setSelectedServiceId(serviceId);
  setQuoteModalOpen(true);
};

All content (services, products, team, blog posts, testimonials and client logos) lives in a typed mockData.ts file, so the site can be rebranded or connected to a CMS by changing one data layer.

RFQ Cost Calculator

The calculator has three steps: estimator, details and success. The estimate is based on a price per metric ton for each resin grade, with automatic volume-tier discounts:

const baseResinPrices: Record<string, number> = {
  PP: 1250, HDPE: 1320, LDPE: 1380, ABS: 1850,
  PC: 2600, PET: 1180, PVC: 1100, PCR: 1150
};

let discountPercent = 0;
if (quantity >= 100) discountPercent = 18;
else if (quantity >= 50) discountPercent = 12;
else if (quantity >= 20) discountPercent = 6;

const estimatedTotal = Math.round(
  unitType === 'tons'
    ? quantity * currentPricePerTon * (1 - discountPercent / 100)
    : quantity * 1.85 * (1 - discountPercent / 100)
);

Volume is priced in metric tons for bulk resin and in units for moulding and tooling jobs, switching automatically with the chosen service, and buyers can mark whether they have CAD files. The details step then collects their name, company, email, phone, delivery ZIP or port, and spec notes such as masterbatch colour, wall thickness or FDA/RoHS needs.

Frontend

Styling uses Tailwind CSS 4 with brand tokens declared in @theme:

@theme {
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --color-brand-orange: #f25a38;
  --color-brand-orange-hover: #dc4827;
  --color-brand-ice: #eef5fa;
  --color-brand-navy: #182848;
  --color-brand-dark: #1e242f;
}

Key Technologies:

• Framework: React 19 + Vite
• Language: TypeScript
• Styling: Tailwind CSS 4 with brand design tokens
• Icons: Lucide React plus custom inline SVG artwork
• Data: Typed mock data modules, ready to swap for a CMS or API

Challenges & Solutions

Challenge 1: Quoting Without a Sales Call

Problem: Wholesale buyers want a rough price before they share their contact details, but real quotes depend on resin, volume and service.

Solution: I built the RFQ modal as an estimator first, form second. Buyers choose a service and resin, set a volume and see an itemised estimate with the discount tier already applied. Only then do they continue to the contact step. Because they have already seen a number, the leads that come through are warmer and better qualified.

Challenge 2: Two Businesses on One Page

Problem: Custom moulding and bulk resin supply attract different buyers, and a single product grid would mix automotive housings with 25 kg pellet sacks.

Solution: The portfolio uses sector filters (Industrial Packaging & Crates, Precision Automotive & Medical, Bulk Wholesale Resins, Extruded Profiles & Conduit). Each product opens a spec sheet showing the details each buyer cares about: material, lead time, MOQ and certifications such as ISO 13485, IATF 16949 or FDA compliance.

Challenge 3: Finding Your Way on a Long Page

Problem: With 12 sections on one page, visitors can easily lose track of where they are.

Solution: The fixed header listens to scroll events, gains a blurred white background once the page moves, and highlights the navigation link for the section currently in view. Every section has an anchor id, so the navigation, the footer links and the "Discover More" button all scroll to the right place.

Results & Impact

• Dual-Business Website: Custom manufacturing and wholesale resin distribution presented together in one clear story.
• Self-Service Quoting: An instant cost calculator with 8 resin grades and volume discounts produces qualified RFQs.
• Spec-Driven Portfolio: Filterable products with material, lead time, MOQ and certification details.
• Easy to Rebrand: Typed data modules and design tokens make it simple to adapt for any plastics or polymer company.