Flexsys Gummi Hoses — Website (Next.js)

This is the Flexsys Gummi Hoses Pvt. Ltd. marketing website, rebuilt in Next.js (App Router + TypeScript) from the original static HTML page, ready for production deployment.

Project structure

app/
  layout.tsx      Root layout — fonts, metadata
  page.tsx         Assembles all sections for the homepage
  globals.css      All site styles (ported 1:1 from the original CSS, using CSS variables)
components/
  Nav.tsx          Sticky top navigation
  Hero.tsx         Hero banner with stats panel
  Ticker.tsx       Scrolling product name ticker
  About.tsx        "The Philosophy" + company pillars
  Products.tsx     Full product catalogue (renders from lib/products.ts)
  WhyUs.tsx        "Flexsys Advantage" cards
  Industries.tsx   Industries served grid
  Network.tsx      Dealer network (4 zones)
  Process.tsx      Enquiry-to-delivery steps
  CTABand.tsx      Mid-page call-to-action band
  Contact.tsx      Contact info boxes + enquiry form
  EnquiryForm.tsx  Client component — interactive enquiry form
  Footer.tsx       Site footer
  FlexsysMark.tsx  Reusable SVG logo (3 color variants)
  Reveal.tsx       Scroll-triggered fade-up animation wrapper
  SmoothScroll.tsx Smooth-scrolling for in-page anchor links
lib/
  products.ts      All product specs/tables as structured data
public/
  flexsys-product-catalogue.pdf   Downloadable catalogue PDF

Getting started

npm install
npm run dev

Open http://localhost:3000 to view it.

Production build

npm run build
npm run start

Note on fonts: this project loads Montserrat, Lato, and Oswald via a standard Google Fonts <link> tag in app/layout.tsx rather than next/font/google, because next/font needs to fetch the font files at build time and some sandboxed/offline build environments block that request. If your deployment environment has normal internet access (Vercel, most CI/CD, etc.) you can switch to next/font/google for better performance (no external request at runtime, no layout shift) — swap the <link> tags in app/layout.tsx for the font loaders, the way create-next-app sets up by default.

Updating content

• Product specs/tables — edit lib/products.ts. Each product is one object with its spec list and pricing/dimension table; the Products.tsx component renders all of them automatically, so adding a new hose type is just adding a new entry to the array.
• Contact details, phone numbers, email, address — edit Contact.tsx and Footer.tsx.
• Enquiry form — EnquiryForm.tsx is a client component with local state for the submit button feedback. It does not currently send data anywhere — wire up the handleSubmit function to call an API route, a form backend (e.g. Formspree), or an email service before going live.
• Catalogue PDF — replace public/flexsys-product-catalogue.pdf with an updated file of the same name to update both download buttons site-wide.

Deployment

This is a standard Next.js app and deploys cleanly to Vercel, Netlify, Cloudflare Pages, or any Node.js host:

# Vercel (recommended, zero-config)
npx vercel

# Or any Node host
npm run build
npm run start

No environment variables or external services are required for the site to render — the only "backend" piece to wire up before going fully live is the enquiry form submission handler mentioned above.