Eneza Website

The public-facing website for Eneza, providing information about the platform, guides for advertisers and posters, and company information.

Technology Stack

Component	Technology
Framework	React 18
Build Tool	Vite
Language	TypeScript
Styling	Tailwind CSS
Hosting	Cloudflare Pages
Functions	Cloudflare Pages Functions

Project Structure

website/
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   ├── pages/
│   │   ├── AboutUs.tsx
│   │   ├── AdvertiserGuide.tsx
│   │   ├── Blog.tsx
│   │   ├── Careers.tsx
│   │   ├── Community.tsx
│   │   ├── EarnMoney.tsx
│   │   ├── HelpCenter.tsx
│   │   ├── Partners.tsx
│   │   ├── Press.tsx
│   │   ├── PrivacyPolicy.tsx
│   │   ├── TermsOfService.tsx
│   │   ├── WhatsAppEarningGuide.tsx
│   │   └── blog/                    # Individual blog posts
│   ├── components/
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   ├── Hero.tsx
│   │   ├── Features.tsx
│   │   ├── Testimonials.tsx
│   │   └── ...
│   ├── hooks/
│   └── utils/
├── functions/                       # Cloudflare Pages Functions
│   └── api/
│       └── dashboard/
│           └── metrics.ts           # CEO dashboard proxy
├── tailwind.config.js
└── vite.config.ts

Pages

Home Page

Landing page with:

• Hero section with value proposition
• How it works (3-step flow)
• Features grid
• Testimonials
• CTA for advertisers and posters

Earn Money (/earn-money)

Information for potential posters.

Content:

• How the earning model works
• Step-by-step guide
• Earning potential calculator
• Mobile app download links
• FAQ

Advertiser Guide (/advertiser-guide)

Information for potential advertisers.

Content:

• Platform overview
• Pricing explanation
• Campaign creation guide
• Targeting options
• Case studies
• CTA to sign up

WhatsApp Earning Guide (/whatsapp-earning-guide)

Detailed guide for posters.

Content:

• Setting up WhatsApp Status
• Downloading and posting ads
• Taking valid screenshots
• Common mistakes to avoid
• Tips for maximizing earnings

About Us (/about)

Company information.

Content:

• Company mission
• Team (optional)
• Company history
• Contact information

Blog (/blog)

Blog for SEO and content marketing.

Content:

• Blog post list
• Individual post pages
• Categories
• Search

Help Center (/help)

User support resources.

Content:

• FAQ sections
• How-to guides
• Contact support form
• Links to app

Careers (/careers)

Job listings (if applicable).

Partners (/partners)

Partnership opportunities.

Press (/press)

Press kit and media resources.

Legal Pages

• Privacy Policy (/privacy-policy)
• Terms of Service (/terms-of-service)

Cloudflare Pages Functions

Dashboard Metrics Proxy

Proxies requests to the API dashboard endpoint (adds API key).

// functions/api/dashboard/metrics.ts
export const onRequest: PagesFunction<Env> = async (context) => {
  const apiKey = context.env.DASHBOARD_API_KEY;
  const apiUrl = context.env.API_URL || 'https://api.eneza.app';

  const response = await fetch(`${apiUrl}/api/dashboard/metrics`, {
    headers: {
      'X-API-Key': apiKey,
      'Content-Type': 'application/json',
    },
  });

  const data = await response.json();

  return new Response(JSON.stringify(data), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'public, max-age=300', // Cache 5 minutes
    },
  });
};

This allows the website to display live metrics without exposing the API key.

Components

Header

// components/Header.tsx
export function Header() {
  return (
    <header className="sticky top-0 z-50 bg-white shadow-sm">
      <nav className="container mx-auto flex items-center justify-between py-4">
        <Link to="/">
          <img src="/logo.svg" alt="Eneza" className="h-8" />
        </Link>

        <div className="hidden md:flex space-x-8">
          <Link to="/earn-money">Earn Money</Link>
          <Link to="/advertiser-guide">For Advertisers</Link>
          <Link to="/blog">Blog</Link>
          <Link to="/help">Help</Link>
        </div>

        <div className="flex space-x-4">
          <a href="https://grow.eneza.app/login" className="btn-secondary">
            Advertiser Login
          </a>
          <a href="/download" className="btn-primary">
            Download App
          </a>
        </div>
      </nav>
    </header>
  );
}

Footer

// components/Footer.tsx
export function Footer() {
  return (
    <footer className="bg-gray-900 text-white py-16">
      <div className="container mx-auto grid grid-cols-4 gap-8">
        <div>
          <img src="/logo-white.svg" alt="Eneza" className="h-8 mb-4" />
          <p className="text-gray-400">
            Earn money by posting ads to your WhatsApp Status.
          </p>
        </div>

        <div>
          <h4 className="font-bold mb-4">For Posters</h4>
          <ul className="space-y-2 text-gray-400">
            <li><Link to="/earn-money">How It Works</Link></li>
            <li><Link to="/whatsapp-earning-guide">WhatsApp Guide</Link></li>
            <li><a href="/download">Download App</a></li>
          </ul>
        </div>

        <div>
          <h4 className="font-bold mb-4">For Advertisers</h4>
          <ul className="space-y-2 text-gray-400">
            <li><Link to="/advertiser-guide">Advertiser Guide</Link></li>
            <li><a href="https://grow.eneza.app">Dashboard</a></li>
            <li><Link to="/partners">Partners</Link></li>
          </ul>
        </div>

        <div>
          <h4 className="font-bold mb-4">Company</h4>
          <ul className="space-y-2 text-gray-400">
            <li><Link to="/about">About Us</Link></li>
            <li><Link to="/blog">Blog</Link></li>
            <li><Link to="/careers">Careers</Link></li>
            <li><Link to="/press">Press</Link></li>
          </ul>
        </div>
      </div>

      <div className="container mx-auto mt-12 pt-8 border-t border-gray-800">
        <div className="flex justify-between text-gray-400 text-sm">
          <p>© {new Date().getFullYear()} Eneza. All rights reserved.</p>
          <div className="space-x-4">
            <Link to="/privacy-policy">Privacy Policy</Link>
            <Link to="/terms-of-service">Terms of Service</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}

SEO Configuration

// Each page includes meta tags
import { Helmet } from 'react-helmet-async';

function EarnMoneyPage() {
  return (
    <>
      <Helmet>
        <title>Earn Money on WhatsApp | Eneza</title>
        <meta
          name="description"
          content="Earn money by posting sponsored videos to your WhatsApp Status. Get paid for every verified view."
        />
        <meta property="og:title" content="Earn Money on WhatsApp | Eneza" />
        <meta property="og:image" content="https://eneza.app/og-earn-money.jpg" />
      </Helmet>

      {/* Page content */}
    </>
  );
}

Deployment

Hosted on Cloudflare Pages.

# Build
npm run build

# Deploy (automatic via Git)
git push origin main

# Manual deploy
npx wrangler pages deploy dist --project-name=eneza-website

URLs:

• Production: https://eneza.app and https://www.eneza.app

Environment Variables

For Cloudflare Pages Functions:

# In Cloudflare Pages dashboard
DASHBOARD_API_KEY=eneza-dashboard-api-key
API_URL=https://api.eneza.app

For build:

VITE_API_URL=https://api.eneza.app

Analytics

The website uses:

• Cloudflare Web Analytics (privacy-focused)
• Optional: Google Analytics 4

<!-- Cloudflare Web Analytics -->
<script
  defer
  src="https://static.cloudflareinsights.com/beacon.min.js"
  data-cf-beacon='{"token": "..."}'
></script>