Skip to content

MonoidDev/evertrace-homepage

Repository files navigation

Evertrace Homepage

🕊️ The Missing Digital Layer in How We Grieve

An immersive, emotionally resonant homepage for Evertrace - a digital memorialization platform that provides AI-powered infrastructure for grieving, remembrance, and legacy preservation.

✨ Features

  • Scroll-driven animations with GSAP + ScrollTrigger
  • Immersive storytelling sections that unfold emotional layers
  • Japanese aesthetic inspiration (wabi-sabi, serenity)
  • Dark/light mode support
  • Mobile responsive design
  • Interactive components with Framer Motion
  • Poetic typography using Playfair Display + Inter

🎨 Design Philosophy

  • Calm, dignified, poetic and human-centric design
  • Calming color palette: indigo blue, deep navy, translucent whites, soft golds
  • Narrative tone: Storytelling over selling
  • Full-screen sections with immersive transitions
  • Sacred digital space feeling - not a typical SaaS product

🚀 Getting Started

  1. Install dependencies:

    npm install
  2. Run the development server:

    npm run dev
  3. Open your browser: Navigate to http://localhost:3000

📐 Page Structure

  1. 🕊️ Hero Section - "The Missing Digital Layer in How We Grieve"
  2. 🧱 Problem Section - Scroll-pinned storytelling about emotional infrastructure gap
  3. 🌉 Vision Section - Bridge between digital lives and remembrance
  4. 🇯🇵 Japan Market Fit - Demographic data with temple-to-digital transitions
  5. 🌍 Global Trends - Why the world is ready for emotional infrastructure
  6. 💡 Features Highlight - Interactive cards showcasing key features
  7. 📈 Why Now - Timing and market readiness
  8. 🧬 Demo Showcase - Product demonstration
  9. 🫂 Testimonials - Stories of remembrance
  10. 🌱 Vision Poetry - Large-font poetic quotes
  11. 🧑‍🤝‍🧑 Team Section - Meet the founders
  12. 📩 CTA Section - Final call-to-action

🛠️ Tech Stack

  • Framework: Next.js 14 with App Router
  • Styling: Tailwind CSS with custom design system
  • Animations: GSAP + ScrollTrigger, Framer Motion
  • Typography: Playfair Display (serif) + Inter (sans-serif)
  • Language: TypeScript
  • Package Manager: npm

🎭 Custom Design System

Colors

  • Indigo: Primary brand colors (blue-purple tones)
  • Navy: Supporting dark tones
  • Gold: Accent colors for warmth
  • Custom gradients and opacity variations

Typography

  • Headings: Playfair Display (serif)
  • Body: Inter (humanist sans-serif)
  • Responsive: Mobile-first scaling

Components

  • Glass morphism: Translucent card effects
  • Floating elements: Subtle background animations
  • Parallax scrolling: Depth and immersion
  • Gradient backgrounds: Emotional color transitions

📱 Responsive Design

  • Mobile-first: Optimized for all screen sizes
  • Touch-friendly: Interactive elements sized for mobile
  • Performance: Optimized animations and loading
  • Accessibility: ARIA labels, focus states, keyboard navigation

🌙 Dark Mode

  • System preference detection
  • Toggle button in navigation
  • Consistent theming across all components
  • Smooth transitions between modes

🎌 Japanese Design Elements

  • Wabi-sabi philosophy: Beauty in imperfection and impermanence
  • Minimalist aesthetics: Clean, uncluttered layouts
  • Cherry blossom motifs: Subtle decorative elements
  • Temple-to-digital transitions: Cultural bridge metaphors

📧 Contact

For inquiries: [email protected]


"We digitize everything—except how we say goodbye."

Evertrace - Reimagining how humanity remembers. alt text

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •