50 lines
1.4 KiB
Markdown
50 lines
1.4 KiB
Markdown
# UP Parivaar Dallas — Website
|
|
|
|
A pixel-faithful Next.js (App Router) implementation of the **UP Parivar Dallas**
|
|
Figma design (Page 1 — all 7 screens).
|
|
|
|
## Pages
|
|
|
|
| Route | Screen |
|
|
|-------|--------|
|
|
| `/` | Home |
|
|
| `/about` | About Us |
|
|
| `/events` | Events |
|
|
| `/events/detail` | Event Detail (Diwali Mahotsav) |
|
|
| `/gallery` | Gallery |
|
|
| `/knowledge` | Knowledge Hub |
|
|
| `/why-join` | Why Join / Membership |
|
|
|
|
## Tech
|
|
|
|
- **Next.js 15** (App Router) + **React 19**
|
|
- **Tailwind CSS 3** design system (`tailwind.config.ts` — brand colors, fonts, shadows)
|
|
- **Fonts:** Playfair Display (display headings — matches Figma's *Kalufonia*), Gloock (serif), Parkinsans (body — the Figma UI font), via `next/font`
|
|
- All imagery exported directly from the Figma file into `public/img`
|
|
- `next/image` optimization throughout
|
|
|
|
## Run
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # http://localhost:3000
|
|
# or
|
|
npm run build && npm run start
|
|
```
|
|
|
|
## Structure
|
|
|
|
```
|
|
app/ # route segments (one folder per page)
|
|
components/ # Navbar, Footer, Logo, EventCard, Tabs, Carousel,
|
|
# Faq, MembershipForm, WhatsAppFab, ui primitives
|
|
lib/data.ts # shared content (events, testimonials, FAQs)
|
|
public/img/ # design assets exported from Figma
|
|
```
|
|
|
|
## Design tokens
|
|
|
|
- Primary orange `#F45700`, light orange `#FF8001`, gold `#FFC107`
|
|
- Cream background `#FFF7F3`, deep-brown footer `#1C0E03`
|
|
- Logo accents: navy `#150D8E`, green `#7ECA4F`
|