KANET Website

Marketing site for KANET — Kuwait-based sponsorship, leasing, manpower and life-support services. Built with Vite + React (JavaScript) + Tailwind CSS.

---

Quick start

npm install
npm run dev      # start dev server (http://localhost:5173)
npm run build    # production build → /dist
npm run preview  # preview production build locally

Project structure

KANET/
├─ public/
│  └─ images/                  ← drop image assets here (see list below)
├─ src/
│  ├─ components/              ← Navbar, Hero, About, Services, Clients, Values,
│  │                             Commitment, Leadership, Contact, Footer, WhatsAppButton
│  ├─ data/
│  │  ├─ services.js           ← Sponsorship / Leasing / Manpower / Life Support content
│  │  └─ clients.js            ← client names
│  ├─ config.js                ← company info, nav links, WhatsApp helper
│  ├─ App.jsx
│  ├─ main.jsx
│  └─ index.css                ← Tailwind directives + design tokens
├─ index.html
├─ tailwind.config.js          ← brand palette: navy + gold
├─ postcss.config.js
├─ vite.config.js
└─ package.json

Required image assets

Place the following files inside public/images/ (filenames are referenced from code — keep them exact):

File	Used in	Suggested source
logo.png	Navbar, Footer	KANET wordmark + bird logo
hero-team.jpg	Hero section	Boardroom / team photo
clients/<slug>.png	Clients grid	Client logos (see src/data/clients.js)

Section photography — Services banners, About, Commitment, Case Studies, Leadership — is currently hot-linked from Unsplash (free for commercial use). The URLs live next to their consumers in src/data/services.js, src/data/caseStudies.js, and the corresponding component files. Swap any URL for a local /images/<your-file>.jpg path once real photography is supplied.

If a file is missing, the surrounding section still renders — SmartImage shows a labelled fallback panel.

WhatsApp button

The floating button and all CTAs link via wa.me/<number> with a pre-filled message. Update the number / display label in src/config.js:

whatsappNumber: '96566482660',
whatsappDisplay: '+965 6648 2660',

Brand palette (already configured)

Token	Value	Use
navy-900	#0f1730	Primary dark, footer
navy-800	#1B2A4E	Body text, headings
gold-400	#E8A33D	Accent, primary CTA
gold-300	#e8b95a	Eyebrow / highlight

Extend in tailwind.config.js if needed.

Editing content

• Service copy → src/data/services.js
• Client list → src/data/clients.js
• Company info / contact details → src/config.js
• Hero headline / stats → src/components/Hero.jsx
• Values → src/components/Values.jsx

Deployment

The output of npm run build is a static dist/ folder. Deploy to any static host — Vercel, Netlify, Cloudflare Pages, S3+CloudFront, or your own server.

npm run build
# upload contents of /dist