Pabitra.Net is a fully responsive, animated landing page built as a high-end
digital presence for a creative marketing agency. The design follows a
dark “cosmic” aesthetic with gradient accents (orange, pink, cyan, blue),
floating geometric decorations, and smooth scroll-reveal motion throughout.
The layout is inspired by the Saira agency template and re-imagined with
the Pabitra.Net brand identity, custom logo, and personal portrait imagery.

Tech Stack
———-
– React 18 + TypeScript
– Vite 5 (build tooling)
– Tailwind CSS v3 with a custom HSL-based design system
– Framer Motion + custom CSS keyframes for animation
– shadcn/ui component primitives (Radix UI)
– Lovable Cloud (managed Supabase backend) for forms and data
– React Router for client-side routing
– TanStack Query for data fetching

Key Sections
————
1. Sticky Navigation — translucent on scroll, gradient CTA button.
2. Hero — animated portrait with floating “Project Z” and rating cards,
decorative blobs, sparkles, and geometric shapes.
3. Features — service highlight cards.
4. Expand — secondary portrait section with growth messaging.
5. Logo Strip — partner/client marquee.
6. Services — full service grid.
7. Contact — contact form wired to the cloud backend.
8. Stats — animated counters.
9. Wave Divider — multi-color drifting SVG ribbons.
10. Cases — featured project cards with hover motion.
11. Testimonials — floating avatar bubbles + customer quotes.
12. Steps — numbered process explanation.
13. Newsletter — email signup with portrait.
14. Blog — latest articles preview.
15. Footer — links, gallery, social icons, brand logo.

Design System
————-
– Semantic color tokens defined in `index.css` (HSL only).
– Custom gradients: brand-orange, brand-pink, brand-cyan, brand-blue.
– Reusable utilities: `glass`, `animate-float`, `animate-spin-slow`,
`animate-wave-drift`, `reveal`/`in` scroll-reveal pattern.
– Custom SVG logo and image-based brand mark for header and footer.

Backend (Lovable Cloud)
———————–
– Newsletter and contact submissions persisted to a managed Postgres
database with Row-Level Security policies.
– Auto-generated Supabase client (`@/integrations/supabase/client`).
– Migration files versioned in `supabase/migrations/`.

Animations & Motion
——————-
– IntersectionObserver-driven reveal-on-scroll via the `useReveal` hook.
– Floating shapes, drifting wave ribbons, slow-spinning geometry, and
hover micro-interactions throughout.

Deployment
———-
– Production build output is in `dist/`.
– Includes an `.htaccess` for SPA routing, gzip, and long-cache headers,
ready to upload to a cPanel `public_html/` directory.
– Also deployable as a Lovable-hosted app at a `*.lovable.app` URL or a
connected custom domain.

Project Structure (high level)
——————————
src/
assets/ brand logo + portrait & content imagery
components/landing/ all page sections (Hero, Services, Footer, …)
components/ui/ shadcn primitives
hooks/ useReveal, use-toast, use-mobile
integrations/supabase/ auto-generated client + types
pages/ Index, NotFound
supabase/
migrations/ SQL schema for backend tables