A marketing and landing website for VRide, Pakistan's first online car rental portal. The site showcases the service, its core features, business model, and drives app downloads and customer sign-ups.
This repository contains the front-end codebase for the public-facing site only (no backend or booking logic lives here). It is a single-page React application built with Vite and Tailwind CSS.
The site is organized as a single scrolling landing page with the following sections:
- Hero — brand introduction, primary call-to-action, and key stats (vehicles, customers, cities, support hours)
- Services — car rental, trip advisory, wedding car planning, drop-off, security
- About — mission, vision, and why VRide
- Features — mobile app, flexible pricing, 24/7 support, secure booking, and more
- Business Model — partners, customer segments, revenue streams, value proposition, and growth strategy
- Footer — contact information, social links, and app download CTA
| Area | Choice |
|---|---|
| Build tool | Vite 5 |
| Framework | React 18 + TypeScript |
| Styling | Tailwind CSS + tailwindcss-animate |
| UI primitives | shadcn/ui (Radix UI) |
| Forms | react-hook-form + Zod |
| Routing | React Router v6 |
| Data / async | TanStack Query |
| Icons | lucide-react |
| Linting | ESLint 9 (typescript-eslint) |
- Node.js 18 or newer (20+ recommended)
- npm 9+ (or bun / pnpm if you prefer — a
bun.lockbis included)
# 1. Clone the repository
git clone https://github.com/<your-username>/<repo-name>.git
cd <repo-name>
# 2. Install dependencies
npm install
# 3. Start the dev server (http://localhost:8080)
npm run dev| Script | Purpose |
|---|---|
npm run dev |
Start the Vite dev server with HMR on port 8080 |
npm run build |
Production build (outputs to dist/) |
npm run build:dev |
Build using development mode |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint across the project |
vride-web-flow/
├── public/ # Static assets served as-is (images, favicon)
├── src/
│ ├── components/ # Page sections (Hero, About, Features, etc.)
│ │ └── ui/ # shadcn/ui primitives
│ ├── hooks/ # Reusable React hooks
│ ├── lib/ # Shared utilities (e.g. class-name helpers)
│ ├── pages/ # Route-level components (Index, NotFound)
│ ├── App.tsx # App shell, router, providers
│ ├── main.tsx # React entry point
│ └── index.css # Tailwind layers and global styles
├── index.html # Vite HTML entry
├── tailwind.config.ts # Tailwind theme extensions
├── vite.config.ts # Vite config (alias `@` → `src/`)
└── tsconfig*.json # TypeScript configs
The path alias @/ resolves to src/, so imports look like import { Button } from "@/components/ui/button".
The site is fully static and does not require any environment variables to build or run. If you later wire in a backend or analytics, place variables in a local .env (already git-ignored) using Vite's VITE_ prefix:
VITE_API_BASE_URL=https://api.example.com
Never commit real .env values. A safe .env.example without secrets may be added for reference.
The output of npm run build is a plain static site in dist/. It can be hosted on any static host:
- Vercel / Netlify — point them at this repo, set build command
npm run build, output directorydist - Cloudflare Pages — same settings
- Nginx / Apache / S3 + CloudFront — upload
dist/and serveindex.htmlas the SPA fallback
Ensure the host rewrites unknown routes to index.html so client-side routing works.
This is a private marketing site, but if you spot a bug or typo feel free to open an issue or pull request. Keep commits focused and run npm run lint before pushing.
All rights reserved © VRide. The code in this repository is shared publicly for portfolio and reference purposes. The VRide name, logo, and brand assets are property of their respective owner and may not be reused without permission.