Elementra is a high-fidelity demo website for a charity / NGO
organization focused on empowering children and communities
through education, clean water, nutrition, and sustainable
programs. The project demonstrates how a modern marketing site
can combine editorial typography, warm humanitarian
photography, and motion design to create an emotionally
engaging brand experience — without sacrificing performance or
accessibility.

The design is inspired by the Elementra Charity theme but
re-imagined from scratch with a custom design system, a bolder
visual hierarchy, and significantly more motion and
micro-interactions throughout the page.

KEY FEATURES
————
1. Animated Hero Section
– Large editorial heading with handwritten-style SVG
underline that draws on load
– Tilted, staggered photo gallery with hover interactions
– Sponsor / partner marquee with infinite horizontal scroll
– Floating gradient blobs and decorative accents

2. About / Mission Section
– Side-by-side image and content layout
– Animated progress bars for impact metrics
– Rotating circular badge (“Donate · Help · Care · Support”)
– Floating info card with achievement highlight

3. “Together Forward” Marquee Bands
– Two infinite marquees (light and dark) used as visual
dividers between sections

4. Recent Initiatives Section
– Dark gradient background with animated decorative shapes
– Three program cards with image zoom on hover
– Animated counter stats (programs, children supported,
years in operation, projects accomplished)

5. Testimonials Section
– Real quotes from donors, volunteers, and community leads
– Star rating, quote marks, and large feature image

6. Donation Section
– Frequency selector (One-time / Monthly / Yearly)
– Preset donation amounts ($25 – $1,000) with active state
animation using Framer Motion’s layoutId
– Custom amount input
– Dynamic CTA button reflecting selected amount and
frequency
– SSL trust line for credibility

7. Call-to-Action Banner
– Volunteer recruitment card overlaid on a hero photo

8. Footer
– Multi-column footer with contact info, navigation, social
icons, and oversized brand watermark

9. Floating Demo Notice Popup
– Bottom-right glassmorphism card
– Pulsing live dot, branding logos, and contact links
– Spring entrance animation and continuous floating motion

DESIGN SYSTEM
————-
– Fully token-based color system using HSL CSS variables
– Custom palette: warm cream background, deep teal primary,
vibrant coral/orange accent, and gold + sky highlights
– Custom button variants: hero, donate, pill, xl
– Typography pairing: Fraunces (serif display) + Inter (body)
– Reusable utilities: gradients, blob backgrounds, marquee,
squiggle pattern, soft and glow shadows
– Smooth and spring transition curves defined globally

TECH STACK
———-
– React 18 + TypeScript
– Vite 5 (lightning-fast build tool)
– Tailwind CSS v3 with custom design tokens
– Framer Motion (page-wide animations and micro-interactions)
– shadcn/ui component primitives
– Lucide React icons
– React Router DOM

PERFORMANCE & DEPLOYMENT
————————
– Production bundle is fully optimized and tree-shaken
– All images are bundled and lazy-loaded
– Includes a ready-to-upload cPanel package with .htaccess
configured for SPA routing, gzip compression, and long-term
asset caching
– Total deployable size: ~1.2 MB

PROJECT STATUS
————–
This is a frontend-only demonstration build. The donation
form, contact actions, and CTA buttons are visual only —
backend integration (payments, CMS, authentication, email)
can be added in a future iteration.

CREDITS
——-
Designed & developed as a portfolio / demo project.
Branding by:
– pabitra.net — https://pabitra.net
– Brown Fox IT — https://brownfoxit.com