The public-facing website for the ELDORA ecosystem — a single-page marketing site that showcases the caregiver app, hosts a dynamic APK download route that always resolves the latest GitHub Release, and provides Google Play-required legal pages.
Eldora-Frontend is the public web presence of the ELDORA eldercare ecosystem. It serves three purposes: communicate the product story to families and caregivers, provide a /download endpoint that always resolves to the newest APK asset from GitHub Releases, and host the Privacy Policy and Account Deletion pages required for Google Play Store compliance.
Eldora-Frontend's role in the ELDORA ecosystem: "The storefront — the first place families learn about ELDORA, and the one URL that always hands them the latest app."
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5.9 |
| Styling | Tailwind CSS 3.4 |
| Animation | Framer Motion 12 + GSAP 3.13 |
| Icons | Phosphor Icons (React) |
| Site URL | https://eldora.my.id |
Eldora-Frontend is the public storefront for the ecosystem — it links visitors directly to the mobile app download:
ELDORA Ecosystem
├── 🛡️ DoraShield — Fall detection wearable (ESP32)
├── 🤖 DoraBot — AI voice companion (ESP32-S3)
├── ☁️ Eldora-Backend — API server & orchestration
├── 🧠 Eldora-AI-Pipeline — Voice AI service
├── 📱 Eldora-Mobile — Caregiver app (the product this site promotes)
└── 🌐 Eldora-Frontend — Marketing site + APK download (this repo)
- 🏠 Hero Section — full-viewport landing with GSAP-animated floating phone mockups, an orbital ring decoration, and a Framer Motion scroll-progress bar fixed at the top of the page
- 📣 Animated Marquee — continuously scrolling strip of ELDORA feature keywords, driven by GSAP
- 🃏 Features Section — three pillar cards (DoraShield alerts, Device status, Wellness summaries) with
whileInViewfade-up animations - 📱 Mobile Preview Showcase — six phone mockup frames arranged as an editorial layout, plus a second auto-scrolling mockup carousel below using Framer Motion
- 🪜 How It Works — three numbered steps walking visitors through DoraBot pairing and monitoring
- 📥 APK Download CTA — a prominent download section linking to
/download, which dynamically resolves the latest release asset from theEldoraaa/Eldora-MobileGitHub repository and redirects visitors via HTTP 302 - 🔐 Privacy Policy — full privacy policy page (
/privacy) for Google Play Store compliance - 🗑️ Account Deletion — guided account deletion page (
/account-deletion) explaining the in-app deletion flow, meeting Google Play data deletion requirements - 🔍 Full SEO & Open Graph — canonical URL, OG image (screen-1.jpg), Twitter large card,
application/ld+jsonschema.orgSoftwareApplicationstructured data, complete favicon set withsite.webmanifest - 🖼️ Next.js Image Optimization — AVIF and WebP format negotiation via
next.config.ts
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 16 (App Router) | SSR + static pages, API routes |
| Language | TypeScript 5.9 | Type-safe component and data authoring |
| Styling | Tailwind CSS 3.4 | Utility-first CSS, custom design tokens |
| UI Animation | Framer Motion 12 | Scroll progress bar, parallax hero, whileInView fade-up transitions, mockup carousel |
| DOM Animation | GSAP 3.13 | Floating elements, pulsing ring, orbital decoration, marquee scroll |
| Icons | Phosphor Icons React 2.1 | Lightweight icon components |
| Image Optimization | Next.js <Image> + AVIF/WebP |
Responsive, format-negotiated image delivery |
| Font | Inter (system stack) | Clean, readable sans-serif for medical/care context |
Eldora-Frontend/
│
├── 📁 app/ # Next.js App Router
│ ├── layout.tsx # Root layout — full SEO metadata (OG, Twitter card,
│ │ # canonical, favicon, viewport, theme color)
│ ├── page.tsx # Landing page — hero, marquee, features, preview,
│ │ # how-it-works, APK CTA, footer
│ ├── globals.css # Tailwind base layers + global resets, Inter font
│ ├── 📁 download/
│ │ └── route.ts # Dynamic API route — fetches GitHub Releases API,
│ │ # redirects (302) to latest .apk asset; falls back to
│ │ # hardcoded v1.0.0-build.24 if API is unavailable
│ ├── 📁 privacy/
│ │ └── page.tsx # Privacy Policy page (Google Play requirement)
│ └── 📁 account-deletion/
│ └── page.tsx # Account Deletion page (Google Play requirement)
│
├── 📁 src/
│ ├── 📁 components/common/
│ │ ├── PhoneMockup.tsx # Phone frame component — rounded bezel, dynamic island
│ │ │ # notch, screenshot image via next/image
│ │ ├── MiniIcon.tsx # Section icon variants (shield, device, care, scene)
│ │ └── index.ts # Barrel export
│ └── 📁 constants/
│ └── data.tsx # All site copy, URLs, mockup paths, hero stats,
│ # pillars, features, steps, marquee items, fadeUp variant
│
├── 📁 public/
│ ├── 📁 brand/ # eldora_logo.png, eldora_logo_nobg.png
│ ├── 📁 favicon_io/ # Full favicon set + apple-touch-icon + site.webmanifest
│ ├── 📁 illustrations/ # Feature illustration PNGs (care, alerts, wellness, welcome)
│ └── 📁 mockups/ # App screen screenshots (screen-1.jpg … screen-6.jpg)
│
├── 📄 next.config.ts # Image formats: AVIF + WebP
├── 📄 postcss.config.js # Tailwind + Autoprefixer
└── 📄 package.json
In plain English:
Visitor lands on eldora.app
→ sees hero with animated phone mockups
→ scrolls through feature pillars, mockup carousel, how-it-works steps
→ clicks "Download latest APK"
→ browser hits GET /download (Next.js API route)
→ server fetches GitHub Releases API (5-minute cache)
→ finds the first asset whose name ends in .apk
→ 302 redirect → visitor downloads the APK directly
→ alternatively: clicks "View GitHub release" → github.com/Eldoraaa/Eldora-Mobile/releases/latest
The site uses a custom set of Tailwind color tokens defined in tailwind.config (referenced throughout page.tsx):
| Token | Role | Appearance |
|---|---|---|
eldora-coral |
CTAs, section eyebrows, hover states | Warm red-orange (#D95545) |
eldora-text |
Primary headings and body text | Deep charcoal (#17202A) |
eldora-muted |
Subheadings and descriptive text | Medium grey |
eldora-soft |
Card backgrounds, icon containers | Pale warm cream |
eldora-mint |
Accent highlights, orbit dot | Soft green (rgba(168,216,194,…)) |
eldora-line |
Borders, dividers | Light neutral |
eldora-warm |
Gradient card backgrounds | Warm off-white to cream |
Background: #FDF8F5 — a warm off-white used consistently across all pages and the html element.
Typography: Inter, system-ui fallback chain. All headings use negative tracking (tracking-[-0.07em] to tracking-[-0.105em]) and heavy weight (font-black) for editorial density.
Animation strategy:
- GSAP handles continuous loops:
gsap-float(gentle vertical drift),gsap-pulse(scale breathe),gsap-orbit(360° rotation over 36 s), and the text marquee (xPercent: -50over 30 s) - Framer Motion handles scroll-reactive effects:
useScroll+useTransformfor hero parallax (heroY,heroRotate) and the background glowglowScale, pluswhileInViewfade-up for all content sections
The /download route (app/download/route.ts) is the only server-side dynamic behavior in the project:
GET /download
→ fetch https://api.github.com/repos/Eldoraaa/Eldora-Mobile/releases/latest
{ Accept: application/vnd.github+json, next: { revalidate: 300 } }
→ find first asset where name.endsWith('.apk')
→ 302 redirect to asset.browser_download_url
→ fallback: redirect to hardcoded v1.0.0-build.24 APK URL
The route is marked export const dynamic = "force-dynamic" so it never serves a stale cached response for the redirect target. The revalidate: 300 applies only to the GitHub API fetch, caching that response for 5 minutes to avoid hitting GitHub rate limits on high traffic.
Both pages are required for Google Play Store listing compliance:
| Route | Page | Purpose |
|---|---|---|
/privacy |
Privacy Policy | Explains what data ELDORA collects (account info, device/safety data, notifications, wellness summaries), why it's collected, and how users can control or delete it. Last updated: June 9, 2026 |
/account-deletion |
Account Deletion | Guides users through the in-app account deletion flow and explains what data is removed |
These pages share the same warm cream background (#FDF8F5) and design system as the landing page, with a "Back to Eldora" link in the header.
# 1. Clone the repository
git clone https://github.com/Eldoraaa/eldora-frontend.git
cd eldora-frontend
# 2. Install dependencies
npm install
# 3. Start the dev server
npm run devThe site starts at http://localhost:3000.
npm run build # Production build
npm run start # Start production server (after build)
npm run typecheck # TypeScript type check without emittingnpm run typecheck # runs tsc --noEmitℹ️ No
.envfile is needed. The APK download route fetches the GitHub Releases API without authentication — the public rate limit (60 req/hour per IP) is sufficient given the 5-minute revalidation window.
APK download redirects to fallback instead of latest release
The /download route falls back to the hardcoded v1.0.0-build.24 APK URL when the GitHub Releases API returns a non-OK response. This can happen if:
- The
Eldoraaa/Eldora-Mobilerepository has no published releases - GitHub's API rate limit (60 req/hour unauthenticated) is exceeded
- The latest release has no
.apkasset attached
To fix: publish a release on Eldoraaa/Eldora-Mobile with an .apk file attached as a release asset. The route will pick it up on the next request (within the 5-minute revalidation window).
GSAP animations not playing on first load
GSAP animations in page.tsx run inside a useEffect with a gsap.context() scoped to pageRef. If animations don't play:
- Confirm the page renders as a Client Component (
"use client"at line 1 ofpage.tsx) - Confirm GSAP is installed:
npm installshould includegsap@^3.13.0 - Check the browser console for
gsap is not definederrors
Phone mockup images not loading
PhoneMockup renders screenshots from public/mockups/screen-1.jpg through screen-6.jpg. If images show broken:
- Verify the files exist in
public/mockups/ - Next.js serves
public/files at the root path —screen-1.jpgmaps to/mockups/screen-1.jpg - The
priorityprop is set forscreen-1.jpgto preload the above-the-fold hero image
Eldora-Frontend is the public face of ELDORA, a privacy-first elderly safety ecosystem designed for ASEAN aging populations. The full system follows the Protect → Respond → Recover framework:
| Phase | Component | Role |
|---|---|---|
| 🛡️ Protect | DoraShield (ESP32) | Fall detection wearable — hardware safety layer |
| 🤖 Respond | DoraBot (ESP32-S3) | AI voice companion — audio capture and playback |
| 🧠 Voice AI | Eldora-AI-Pipeline | STT → LLM → Intent → Emotion → TTS |
| ☁️ Orchestrate | Eldora-Backend | API server, device commands, FCM push |
| 📱 Recover | Eldora-Mobile | Caregiver app — safety alerts and monitoring |
| 🌐 Showcase | Eldora-Frontend (this repo) | Marketing site + APK download |
ELDORA — BINUS BM Team Passage to ASEAN Hackathon 2026
| Name | Role |
|---|---|
| Stanley Nathanael Wijaya | Team Lead |
| Lutfi Alvaro Pratama | IoT Engineer |
| Andrian Pratama | Mobile Developer |
| Khalisa Amanda Sifa Ghaizani | Backend Developer |
| Devon Nicholas | AI Engineer |
Have questions, want to collaborate, or interested in ELDORA?
| Channel | Details |
|---|---|
| stanley.n.wijaya7@gmail.com | |
| @xstynwx | |
| 💬 Discord | stynw7 |
This project is licensed under the MIT License — free to use, modify, and distribute.
MIT License
Copyright (c) 2026 ELDORA — BINUS BM Team
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software.
ELDORA Component Map
| Repository | Component | Status |
|---|---|---|
eldora-dorashield |
🛡️ Fall detection wearable | 🔗 |
eldora-dorabot |
🤖 Voice companion firmware | 🔗 |
eldora-mobile |
📱 Caregiver mobile app | 🔗 |
eldora-backend |
☁️ API server & orchestration | 🔗 |
eldora-ai-pipeline |
🧠 Voice AI service | 🔗 |
eldora-frontend |
🌐 Marketing site + APK download | ✅ This repo |
"Stay safe. Stay connected. Stay supported."
Made with 🤍 by BINUS BM Team 🔥