ClientZenXdata Consulting Group
IndustryEducation / Career Services / IT Training
ZenXdata is a production-ready marketing and lead-generation platform for a US-focused career consulting firm. It replicates the wandatatech.com design system — a premium blue/indigo aesthetic with Manrope display typography, Inter body text, subtle radial gradients, and elevated card shadows — delivering a trust-forward visual language for international tech professionals.
The site features 9 public pages (Home, About, Services, Success Stories, Why Choose Us, Pricing, Contact, Blog index + dynamic article pages) plus a secure admin dashboard at /admin. Key UX patterns: floating "Book a Free Career Consultation" widget (bottom-right) and WhatsApp float (bottom-left) that appear on scroll; a global "Book Your Slot" modal submitting leads to /api/leads; scroll-triggered Framer Motion reveals, count-up counters, hero mask animation, and gooey-filter blob buttons.
Content is fully environment-driven — all copy, contact info, social links, and SEO fields come from NEXT_PUBLIC_* env vars (no code edits needed). The blog is powered directly by Turso (libSQL/SQLite at the edge) — Server Components read the database per request, so posts go live instantly. Admin panel (HMAC-signed httpOnly cookie auth) provides leads table with status tracking, blog CRUD with rich-text editor, success stories management, and CSV export.
The Challenge
Build a pixel-faithful, high-performance clone of wandatatech.com that's deployable on any platform (Vercel, AWS Amplify, Cloudflare Workers via OpenNext) while maintaining zero-config local development. The client needed full content control via environment variables, instant blog publishing, and a secure admin panel — all without external auth or CMS dependencies.
The Solution
Next.js 16 App Router with Server Components reading Turso (libSQL) directly — zero API layer for reads, eliminating latency. Tailwind CSS v4 with CSS-first design tokens (@theme) for the custom blue/indigo palette, Manrope/Inter typography scale, and layered shadow system. Framer Motion for scroll reveals, hero mask, count-ups, and floating widgets. Custom HMAC-signed cookie auth (no library) for admin. OpenNext + Wrangler for Cloudflare Workers deployment. SQLite-compatible schema with CREATE TABLE IF NOT EXISTS safety net.
The Results
- ✅ 9 public pages + 5 admin routes — all SSR/ISR ready
- ✅ Sub-100ms TTFB globally via edge SQLite (Turso) + Cloudflare
- ✅ Zero-config local dev: falls back to .data/local.db (gitignored)
- ✅ Full env-driven content — redeploy only for NEXT_PUBLIC_* changes
- ✅ SEO-complete: metadataBase, OG/Twitter, JSON-LD (Organization, WebSite, FAQPage, BlogPosting), sitemap.xml, robots.txt
- ✅ Accessible: semantic HTML, lang="en", descriptive alts, focus states, reduced-motion support
- ✅ Analytics-ready: Plausible-compatible tracker + Web Vitals reporter
- ✅ Deploy anywhere: Vercel (native), Amplify (auto), Cloudflare (OpenNext)
Technologies Used
Next.js 16 (App RouterServer Components)React 19TypeScriptTailwind CSS v4Framer MotionTurso (@libsql/client)OpenNext (@vinext/cloudflare)Lucide ReactSanitize HTMLESLint 9
