Elementra is a premium front-end landing page designed for a
senior-care brand that wants to communicate warmth, trust, and
professionalism. The page is built as a static, production-ready
React application that can be uploaded to any standard cPanel /
shared-hosting environment and served instantly — no backend
required for the demo. A future backend can be added later
through Lovable Cloud.

The design takes inspiration from editorial wellness brands:
generous serif typography (Cormorant Garamond) paired with a
clean Inter body font, a soft cream background, dusty-rose
primary color, and tactile organic accents such as floating leaf
illustrations and subtle film grain.

Key Sections
————
1. Sticky animated header with logo, navigation, phone CTA and
a mobile drawer menu.
2. Hero panel — large rounded image card with staggered
line-by-line headline reveal, floating “24/7 Care” and
“Free Visit” badges, animated client avatars and a circular
“Watch Video” button.
3. Infinite italic marquee strip that scrolls warm phrases.
4. About section with two layered images, a 4-up animated
statistics grid, and a story CTA.
5. Three-card services feature row with icon-rotation hover
effects.
6. “Enrich lives” split section with a checklist of programs
and decorative berries / leaves.
7. Bento-style services grid combining image tiles and text
tiles with hover scale and arrow rotation.
8. Bold full-width marquee separator.
9. Testimonials carousel with animated quote transitions and
next / previous controls.
10. Pricing section with a Monthly / Yearly toggle and a
highlighted “Most popular” plan.
11. Contact form inside a soft card with rounded inputs.
12. FAQ accordion with animated open / close states.
13. Footer with social links, address, contact info, and a rose
marquee strip.
14. Floating glassmorphism “Demo Site” popup with a pulsing
status dot, two clickable developer logos
(pabitra.net & Brown Fox IT), spring entrance and a gentle
continuous bounce.

Design System
————-
– Semantic HSL design tokens (no hard-coded colors) defined in
index.css and surfaced through Tailwind.
– Custom gradients (warm, rose) and elevation shadows
(soft, card) exposed as utilities.
– Fonts: Cormorant Garamond for display, Inter for body.
– Custom keyframes for marquee, slow float, and grain texture.

Animation & Motion
——————
Built with framer-motion. Every section uses scroll-triggered
fade-and-rise reveals, staggered children, spring-based hovers,
infinite marquees, image kenburns on the hero, and a persistent
floating popup. Motion is restrained and consistent — never
flashy.

Tech Stack
———-
– React 18 + TypeScript + Vite
– Tailwind CSS v3 with shadcn-ui primitives
– framer-motion for all motion
– lucide-react icon set
– Static demo images bundled directly into /assets

Deployment
———-
Production build is shipped as a single zip
(elementra-cpanel.zip) containing:
– index.html
– /assets (JS, CSS, all demo images, both logos)
– .htaccess (SPA routing, gzip compression, long-term caching)
– favicon, robots.txt

To deploy: upload the zip in cPanel File Manager, extract into
public_html (or the chosen subdomain folder), delete the zip,
and visit the domain. No build step or Node runtime is required
on the server.

Backend (Planned)
—————–
The current version is a fully static demo. The contact form and
any future booking, authentication, or admin features will be
wired up to Lovable Cloud in a follow-up iteration.