Consultio is a complete front-end landing page concept inspired by the
Consultio SEO theme, but rebuilt from the ground up with a more
ambitious visual language, smoother motion design and a tighter
component architecture.

The page is structured as a continuous narrative — every section flows
into the next with consistent gradients, soft glassmorphism, floating
3D illustrations and subtle scroll-triggered animations. The goal is
to feel less like a template and more like a crafted product page.

> Tech Stack
– React 18 + TypeScript + Vite
– Tailwind CSS with a fully tokenized design system (HSL variables)
– shadcn/ui primitives for accessibility
– framer-motion for entrance, scroll, hover and idle animations
– lucide-react icon set
– Custom Google Fonts: “Sora” (display) + “Plus Jakarta Sans” (body)

> Design System
– Brand palette built around a vivid violet → cyan → pink gradient
– Accent colors: amber, emerald, pink for category differentiation
– Custom gradient utilities: bg-cta-gradient, text-gradient-cta,
bg-mesh, bg-violet-gradient
– Reusable shadow tokens: shadow-glow, shadow-soft, shadow-pop
– Glassmorphism utility for floating UI elements
– Animated keyframes: float, blob, gradient-shift, marquee,
pulse-glow

> Sections (top to bottom)
1. Sticky glass Navbar with scroll-aware blur and animated logo
2. Hero — animated headline, floating 3D rocket illustration,
orbiting metric badges, gradient blobs and social links
3. Services — four service cards with rotating icons, hover lifts
and a progress indicator
4. Quotation — organic blob-shaped portrait, animated KPI bars
and a strategist quote
5. Solutions — staggered feature grid with offset cards and a
sticky-feeling CTA
6. Subscribe — full-width gradient banner with floating clouds
and a glass email capture form
7. Process — 4-step flow with a dashed SVG path animation and
numbered tokens
8. Gallery — staggered team photo grid + animated stats banner
9. Testimonials — giant marquee headline, avatar cluster and
three review cards
10. Contact — split form + contact channels with hover slide
11. Blog — featured posts with image zoom on hover
12. Footer — multi-column links, social icons and a back-to-top
button
13. Floating Demo Notice — glassmorphic bottom-right popup with
pulsing status dot, dismiss button and clickable developer
branding (pabitra.net + Brown Fox IT)

> Animation Highlights
– Spring-based entrance for hero text and rocket
– Continuous floating + idle bounce on hero illustration and
demo popup
– Scroll-reveal (whileInView) on every section
– Hover micro-interactions: lift, rotate, scale, gradient glow
– Animated gradient shifts on CTA buttons and stat banners
– Marquee text behind the testimonials section
– SVG path-length animation in the process timeline

> Responsiveness
– Optimized layouts for mobile (≤640px), tablet and desktop
– Mobile-friendly navigation drawer
– Fluid typography and spacing
– Demo notice popup adapts width (300px mobile / 340px desktop)

> SEO & Quality
– Semantic HTML5 (header, section, article, footer)
– Single H1, descriptive meta title and description
– Canonical link, Open Graph tags
– Lazy-loaded images, accessible alt text
– Smooth scroll, ARIA labels on icon buttons

> Status
This is a front-end-only demo build. The backend (forms,
newsletter, CMS, analytics) is intentionally not wired up yet
and is planned for the next iteration.

> Credits
Designed and developed as a portfolio demonstration by
pabitra.net and Brown Fox IT.