# Parhit Foundation — Website Plan Laravel, fully custom (no Bootstrap/Tailwind/jQuery/Livewire/Filament/admin packages). Modelled on the structure of givea.in, with its gaps fixed. --- ## 1. What givea.in does (analysis) It looks like a Shopify store where each **cause is a fixed-price product** (Rs. 30 – 15,000). The donor adds one to the cart and checks out. Proof of impact (photos/videos) arrives later by WhatsApp and email. | Area | What givea has | Worth copying? | |---|---|---| | Header | Home, Causes, Our Impact, About Us, Contact, Log in, Cart | Yes, plus a permanent **Donate** button | | Mobile | Fixed bottom bar: Home / Causes / Impact / Account, plus WhatsApp chat | Yes, core of the mobile UX | | Home | Stats strip, "how to donate" video, Featured Causes, category-filtered cause grid, 6 core values, birthday promo banner, photo gallery, volunteer CTA, blog (3), "Why people trust us", reviews, press logos, FAQ (5), newsletter | Yes, restructured (see §4) | | Cause card | Image, title, price, "Donate Now" | Yes | | Categories | Birthday, Anniversary, Memorial, Animal, Nature, Women Care, Education, To the Needy | Adapt to Parhit's real programmes | | Pages | About (vision, mission, team, values), Causes, Our Impact, Contact, policies | Yes | | Donor login | Separate subdomain | Yes, built in | **Gaps on givea (we will fix these):** - No 80G/12A/registration/PAN/address anywhere visible, which is a big trust problem for an NGO. - No free-amount donation, no monthly/recurring option, and no dedicated Donate page. - No audited reports or transparency page. - Placeholder content (lorem ipsum blog excerpt, "Someone donated ₹0" toast, "Logo 1–4" alt text, a typo). - Volunteer form is an external Google Form; the FAQ is on the home page only. - Not fetched, so unverified: cause detail page, checkout fields, gateway (the site rate-limited me). The plan below is designed from the visible structure, not from those pages. --- ## 2. Brand (from your logo) - Deep blue ≈ `#0B3D91` (wordmark), green ≈ `#5BA621` (leaf, figure, "FOUNDATION"). White background, with a blue-to-green gradient on the hand. - Tokens: `--blue`, `--blue-dark`, `--green`, `--green-dark`, `--ink`, `--paper`, soft tints for section backgrounds. - Primary action (Donate) = **green**; navigation and headings = **blue**. This keeps the CTA the most visible thing. - Logo is wide (3:1), so it needs a compact header version, and a square icon-only crop for favicon/app icon/OG. I'll export these from your file. - Typography: system font stack plus one self-hosted woff2 heading font (no Google Fonts request = faster, more private). --- ## 3. Sitemap ``` / Home /causes All causes (filter chips, search) /causes/{category} Category landing (SEO) /cause/{slug} Cause detail + donate box /donate Free-amount / monthly donation /checkout Donor details + payment /thank-you/{receipt} Confirmation + receipt download /our-impact Stats, stories, gallery, reports /stories /stories/{slug} Blog / impact stories /about Vision, mission, team, values, registrations /transparency 80G/12A/PAN, annual reports, financials /get-involved/volunteer Volunteer form (internal) /get-involved/partner CSR / corporate partner form /gallery Photo + video gallery /faq /contact /privacy-policy /terms /refund-policy /donor/login /donor/dashboard Donation history, receipts, repeat donate /admin/... Custom admin panel /sitemap.xml /robots.txt ``` --- ## 4. Homepage structure (top to bottom) 1. Sticky header: logo, menu, **Donate** button. On mobile: hamburger plus a bottom bar (Home / Causes / **Donate** / Impact / Account) and a floating WhatsApp button. 2. **Hero**: one emotional line, one sentence of support, two CTAs (Donate Now / Explore Causes), an image slider (CSS scroll-snap, no library). 3. Impact counters (animated on scroll): lives impacted, meals served, donors, etc. All editable from admin. 4. **Quick donate card**: amount chips (₹100 / 500 / 1000 / custom), One-time vs Monthly toggle, Donate. 5. Featured causes (cards). 6. "Causes that matter": category chips plus grid with a "Load more" button. 7. How it works (3 steps: choose, give, get proof on WhatsApp/email). 8. Core values (6 cards). 9. Campaign banner (birthday/occasion giving, editable). 10. Stories of hope: gallery grid with a lightbox (custom). 11. Education/programme spotlight. 12. Trust block: 80G / 12A / PAN / registration, auditor, "see our reports". 13. Testimonials (carousel). 14. Press/partners logos (real names, with alt text). 15. Latest stories (3). 16. Volunteer CTA. 17. FAQ accordion (native `
`). 18. Newsletter / "Giving Circle". 19. Footer: quick links, programmes, policies, address, phone, email, socials, payment-method logos, registration line. --- ## 5. Donation flow (the part that matters most) Two modes, both ending in one checkout: - **Cause package** (givea style): fixed amount × quantity, e.g. "Feed a child — ₹35", so donors see what their rupees do. - **Free amount** (new): custom amount on /donate, optional monthly recurring. Checkout fields: name, mobile, email, PAN (optional, for 80G receipt), address (for receipt), "in memory/honour of" name, occasion date, message, WhatsApp updates opt-in, anonymous toggle, consent checkbox. **Payment gateway:** Razorpay (UPI, cards, netbanking, wallets). Integrated through Laravel's built-in HTTP client plus Razorpay's REST API and webhook signature check, with **no SDK**. Subscriptions use Razorpay's plan/subscription endpoints. Needs your Razorpay account keys later; I will use test mode first. Flow: create `donations` row (pending) → create gateway order → open Razorpay Checkout → verify signature server-side → mark paid, generate receipt number, send email, show thank-you page. A webhook is the source of truth if the browser closes early. Receipts: a printable HTML receipt (browser "Save as PDF") with 80G text. No PDF library. --- ## 6. Technical architecture - **Laravel 12**, PHP 8.4 (installed), MySQL on XAMPP, Composer 2.8 (installed). - Server-rendered Blade, so pages are fast and fully crawlable. JS only for enhancement. - **"Custom" rules:** - No frontend libraries or CSS frameworks. Hand-written CSS (one small file per concern, built into `public/css` with no build tool, or Vite only if you want it). - Vanilla JS modules: menu, counters, slider, accordion, lightbox, filters (fetch), donation widget. - No Breeze/Jetstream/Livewire/Filament/spatie. Auth, roles, admin CRUD, image upload and resize (PHP GD), sitemap, SEO helper and mailer templates are written in-app. - Laravel itself (and what ships in it: Eloquent, Blade, validation, queue, mail) is used as the framework. ### Database (core tables) `users` (admin/editor/donor, role) · `causes` · `cause_categories` · `donations` · `donation_items` · `subscriptions` (recurring) · `donors` (or users) · `stories` (blog) · `story_categories` · `testimonials` · `gallery_items` · `team_members` · `impact_stats` · `faqs` · `volunteers` · `partner_enquiries` · `contacts` · `newsletter_subscribers` · `documents` (reports, certificates) · `pages` (policies, about copy) · `settings` (key/value: phone, address, registration numbers, socials) · `redirects` · `media` ### Folder layout ``` app/Http/Controllers/{Site,Donor,Admin}/ app/Models/ app/Services/{Payment,Receipt,Seo,Image}/ resources/views/{layouts,components,site,donor,admin}/ resources/css/{base,layout,components,pages,admin}.css resources/js/{app,donate,gallery,admin}.js database/migrations database/seeders (real starter content) ``` ### Admin panel (custom, role-based) Dashboard (today's donations, totals, charts drawn in plain SVG) · Causes/categories · Donations (filter, export CSV, resend receipt, mark offline donations) · Stories · Gallery · Testimonials · Team · Stats · FAQs · Volunteers/partners/contacts inbox · Documents/reports · Pages & Settings · SEO fields on every content type. --- ## 7. SEO plan - One `

` per page, semantic landmarks, descriptive URLs, breadcrumbs. - Per-page ``, meta description, canonical, Open Graph and Twitter cards, with sensible auto-defaults and admin overrides. - **JSON-LD:** `NGO`/`Organization` (with `taxID`/registration), `WebSite`, `BreadcrumbList`, `Article` (stories), `FAQPage`, `DonateAction` on cause pages, `ImageObject`. - Dynamic `sitemap.xml` and a proper `robots.txt` (admin/checkout blocked). - Images: WebP generated on upload, `srcset`, explicit width/height (no layout shift), lazy loading, descriptive alt text enforced in admin. - Performance targets: LCP < 2.5 s on 4G, CLS < 0.1; critical CSS inlined, JS deferred, gzip/brotli and long cache headers via `.htaccess`, no render-blocking third-party scripts. Razorpay JS loads only on checkout. - Local SEO: NGO address/phone in footer and on /contact with schema. - Content SEO: category landing pages and an impact-stories section for keywords like "donate for child education India", "80G donation". ## 8. Mobile-first & usability - Designed at 360 px first, then enhanced up. Tap targets ≥ 44 px, 16 px minimum input font (no iOS zoom), `inputmode`/`autocomplete` on every field. - Bottom nav + sticky Donate + WhatsApp on phones; one-thumb checkout in 2 short steps; UPI-first. - Accessibility: contrast checked against the blue/green palette, visible focus, skip link, `prefers-reduced-motion`, ARIA only where native HTML can't do it, forms with inline errors. - Works without JS for browsing; honest empty/loading/error states. - Security: CSRF, validation, rate-limited forms (donate, contact, newsletter), honeypot spam trap, hashed passwords, signed webhook, no card data ever stored. --- ## 9. Build phases | Phase | Deliverable | |---|---| | 1. Foundation | Laravel install, DB, brand CSS tokens, layout (header, mobile bottom bar, footer), logo assets, settings table | | 2. Public pages | Home, About, Causes list/detail, Impact, Stories, Gallery, FAQ, Contact, Volunteer, policies. Seeded with real starter content | | 3. Admin | Login, roles, CRUD for all content, image upload/resize, inbox | | 4. Donations | Cart/cause packages, free-amount + monthly, checkout, Razorpay (test), receipts, emails, donor dashboard | | 5. SEO & performance | Meta/OG/JSON-LD, sitemap, robots, WebP, caching, Lighthouse pass | | 6. QA & launch | Real-device testing, accessibility pass, security review, deployment checklist (hosting, SSL, mail, backups) | --- ## 10. Defaults I'm assuming (tell me if any is wrong) 1. English-only at launch, with the structure ready for Hindi later. 2. Razorpay as the gateway (India, UPI). 3. MySQL via XAMPP for local dev. 4. Programmes/categories to start with: Child Education, Feeding the Needy, Women Empowerment, Health Camps, Animal Care, Environment, Birthday/Occasion Giving. Please replace with your real ones. 5. Real details I still need before launch: registration/80G/12A/PAN numbers, address, phone/WhatsApp, email, social links, and real photos and stories. Until then, the site uses clearly-marked placeholders. --- ## Progress - [x] **Phase 1: Foundation** (done). Laravel 13 on MySQL (`parhit_foundation`), brand tokens, header / mobile bottom bar / footer, settings table, SEO service, custom asset build, home page, placeholder inner pages. - [x] **Phase 2: Public pages** (done). Causes (list, category, detail with quantity picker), Stories, About, Our Impact, Transparency, FAQ, Gallery (custom lightbox), legal pages, Contact / Volunteer / Partner forms, newsletter, sitemap.xml, 404/500, donate placeholder page. All content comes from DB tables seeded with starter content. - [x] **Phase 3: Admin** (done). Sign-in at `/admin` (roles: administrator, editor), dashboard with launch checklist, CRUD for causes, categories, stories, gallery, testimonials, team, FAQs, reports and legal pages, inbox (messages, volunteers, subscribers, CSV export), site settings and impact numbers, user management, own-account page. Images are resized to WebP automatically; rich text is sanitised. - [x] **Phase 4: Donations** (done, tested with the local simulator and a faked Razorpay API; not yet tried with real Razorpay keys). One-time and monthly giving, cause gifts with quantity, PAN/address for receipts, dedications, Razorpay Checkout through the REST API (no SDK), server-side signature checks, signed webhooks, numbered receipts (PF/2026-27/000001), emailed and printable, donor sign-in by emailed code, admin donations with refunds, offline gifts and CSV export. - [x] **Phase 5: SEO & performance** (done). Crawler audit command (0 errors, 0 warnings on all 38 pages), generated robots.txt, sitemap that skips empty pages, canonical rules, managed and automatic 301 redirects, social tags, security headers with a Content-Security-Policy, compression and caching rules, right-sized images, contrast and tap-target fixes. - [ ] Phase 6: QA & launch ### Admin - URL: `/admin`. The first administrator comes from `ADMIN_EMAIL` / `ADMIN_PASSWORD` in `.env` (run `php artisan db:seed --class=AdminSeeder`). Change the password under *My account* after signing in, then remove `ADMIN_PASSWORD` from `.env`. - Editors can manage content and the inbox. Only administrators see Settings and Users. - Add or change a content field in `config/admin.php`; the generic CRUD screens pick it up. ### Dev commands ```bash php artisan serve --port=8000 # run the site php artisan assets:build # rebuild public/css/site.min.css and public/js/site.min.js after editing resources/css or resources/js php artisan migrate --seed # create tables + starter settings ``` ### Campaigns (v2) - A campaign page now has a slidable banner gallery, a sticky donate panel, amount buttons (with a "Most donated" highlight and a custom amount), item cards ("Where your money goes") with ADD + / quantity, a Project section with an optional click-to-play video, and dated Updates. - Donors give an amount OR items, never both at once; items are one-time only. Totals are always recalculated on the server from the database. - Admin > Campaigns > a campaign: Giving options, amount buttons, progress goal, then Banners, Items and Updates lists. - Item counts ("X of N obtained") go up when a donation is paid and back down on a refund. Fully funded items stop accepting more. - Campaign addresses are now `/campaign/{slug}`; the old `/cause/{slug}` addresses redirect. - The "Sample Campaign" is demo data: delete it from Admin > Campaigns before launch. Re-create it any time with `php artisan db:seed --class=DemoCampaignSeeder`. ### SEO and speed tools - `php artisan seo:audit` crawls every sitemap page and checks titles, descriptions, headings, canonical and social tags, image alt text and size, structured data, internal links and 404 behaviour. Run it locally, then against the live site: `php artisan seo:audit --url=https://your-domain`. - `robots.txt` is generated: outside production it blocks everything (so a test copy is never indexed); in production it allows the site and lists the sitemap. Make sure `APP_ENV=production` and `APP_URL=https://your-domain` on the live server. - Changing a cause, category or story web address creates a 301 redirect automatically. More are managed under Admin > Redirects (administrators only). - After uploading a new version to the server run: `php artisan optimize` (caches config, routes and views), and `php artisan assets:build` if you changed CSS/JS. - Behind a load balancer or Cloudflare, set `TRUSTED_PROXIES=*` in `.env`. - Submit `https://your-domain/sitemap.xml` in Google Search Console and Bing Webmaster Tools after launch. ### Going live with payments 1. Create a Razorpay account, finish KYC, and (for monthly giving) ask Razorpay to enable **Subscriptions**. 2. In `.env` set `RAZORPAY_KEY_ID`, `RAZORPAY_KEY_SECRET` (use `rzp_test_...` keys first) and `RAZORPAY_WEBHOOK_SECRET`. 3. In the Razorpay dashboard add the webhook URL `https://YOUR-DOMAIN/webhooks/razorpay` with the same secret and these events: `payment.captured`, `payment.failed`, `order.paid`, `subscription.charged`, `subscription.cancelled`, `subscription.completed`, `subscription.halted`, `refund.processed`. 4. Set real mail settings (`MAIL_*`) so receipts and donor sign-in codes are emailed. Locally they are written to `storage/logs/laravel.log`. 5. Without keys, the site uses a local-only payment simulator in the local environment and shows "payments unavailable" in production. 6. Ask your accountant to confirm: receipt wording, the PAN threshold (`pan_required_from` in `config/parhit.php`) and 80G rules. ### Starter content to review before launch - 7 programmes and 14 sample gifts with amounts (ContentSeeder), 3 evergreen articles, 12 FAQs, About copy (SettingsSeeder). - Privacy, Terms and Refund pages are plain drafts: have a legal adviser review them. - Team, gallery, testimonials and documents are intentionally empty (nothing was invented). Their sections hide or show a friendly empty state. ### Known placeholders to replace before launch Phone, WhatsApp, email, address (Settings seeder), impact counter numbers, the 7 starter programmes, and the emblem crop (a clean vector/transparent logo would be better than the cropped raster).