Evera Protocol Landing Page# Evera Protocol Landing Page# Evera Protocol Landing Page# Evera Protocol Landing PageThis is a Next.js project bootstrapped with `create-next-app`.

Production-ready Next.js 14 landing page for Evera Protocol - a blockchain-based decentralized information verification platform.

🚀 Quick StartBlockchain-based decentralized information verification platform

Prerequisites

Node.js 18.17.0 or higher
npm 9.0.0 or higherBlockchain-based Decentralized Information Verification Platform

Installation


# Install dependencies

npm install



# Create environment file## 🌟 Overview---Welcome to the Evera Protocol landing page - a high-conversion marketing website for the world's first blockchain-based decentralized information verification platform.## Getting Started

cp .env.example .env.local



# Add your environment variables to .env.local

```This is the official landing page and web presence for Evera Protocol. Built with Next.js 14+ App Router, TypeScript, and Tailwind CSS for optimal performance and developer experience.



### Development



```bash### Key Features## 🚀 Project Overview

# Start development server

npm run dev



# Open http://localhost:3000- 🎨 Modern, professional design with brand identity

📱 Fully responsive (mobile, tablet, desktop)

Production Build

⚡ Performance optimized (Lighthouse >90)This is the official landing page for Evera Protocol - the world's first blockchain-based decentralized information verification platform. The website serves multiple purposes:## 🚀 Quick StartFirst, run the development server:

# Build for production- ♿ WCAG 2.1 AA accessible

npm run build

- 🔍 SEO optimized with meta tags and structured data

# Start production server

npm start- 📊 Privacy-friendly Plausible Analytics

💌 ConvertKit email integration- Convert visitors into presale email subscribers (target: >20% capture rate)

📦 Environment Variables

📄 Comprehensive content (whitepaper, pitch deck, roadmap)

Create a .env.local file with the following variables:

Educate about Evera's value proposition across three audiences: investors, publishers, verifiers

# ConvertKit API for email subscriptions## 🚀 Quick Start

CONVERTKIT_API_KEY=your_api_key_here

- Build trust through professional design and comprehensive documentationFollow the steps in the [quickstart.md](../specs/001-develop-an-eye/quickstart.md) guide to get started.```bash

# Analytics

PLAUSIBLE_DOMAIN=evera.network### Prerequisites



# Site Configuration- Drive engagement with token presale and community initiatives

NEXT_PUBLIC_SITE_URL=https://evera.network

- Node.js 20+

# Social Links (optional)

NEXT_PUBLIC_DISCORD_URL=https://discord.gg/evera- pnpm 8+ (recommended)npm run dev

NEXT_PUBLIC_TWITTER_URL=https://twitter.com/EveraProtocol

NEXT_PUBLIC_TELEGRAM_URL=https://t.me/evera

Installation### Success Metrics

🛠️ Tech Stack

Framework: Next.js 14.2+ (App Router)
Language: TypeScript 5.3+```bash- Bounce rate < 40%### Prerequisites# or
Styling: Tailwind CSS 3.4+
Animation: Framer Motion 11+# Clone repository
Forms: React Hook Form + Zod
Charts: Recharts 2+git clone https://github.com/evera-protocol/evera-landing.git- Email capture rate > 20%
Analytics: Plausible Analytics

cd evera-landing

📁 Project Structure

Presale signup intent > 5%yarn dev


evera-landing/# Install dependencies

├── src/

│   ├── app/              # Next.js App Router pagespnpm install- Page load time < 3 seconds

│   ├── components/       # React components

│   ├── content/          # Static content data

│   ├── lib/              # Utilities and helpers

│   └── types/            # TypeScript types# Copy environment variables- Lighthouse performance score > 90- Node.js 20+# or

├── public/               # Static assets

├── tests/                # Test filescp .env.example .env.local

└── docs/                 # Documentation (gitignored)

🚢 Deployment# Edit .env.local with your API keys

Deploy to Vercel# - CONVERTKIT_API_KEY---- npm (comes with Node.js)pnpm dev


# Install Vercel CLI

npm i -g vercel# - NEXT_PUBLIC_SITE_URL



# Deploy

vercel --prod

```# Run development server## 🛠 Tech Stack# or



Or connect your GitHub repository to Vercel for automatic deployments.pnpm dev



### Environment Variables in Vercel```



Add these environment variables in your Vercel project settings:

- `CONVERTKIT_API_KEY`

- `PLAUSIBLE_DOMAIN`Open [http://localhost:3000](http://localhost:3000)### Core Framework### Installationbun dev

- `NEXT_PUBLIC_SITE_URL`



## 📝 Scripts

## 📁 Project Structure- **Next.js 14.2+** with App Router

- `npm run dev` - Start development server

- `npm run build` - Build for production

- `npm start` - Start production server

- `npm run lint` - Run ESLint```- **React 18+** with Server Components & Client Components```

- `npm run type-check` - Check TypeScript types

- `npm test` - Run Jest testssrc/

- `npm run test:e2e` - Run Playwright E2E tests

├── app/              # Next.js 14 App Router pages- **TypeScript 5.3+** (strict mode enabled)

## 🌐 Browser Support

│   ├── page.tsx      # Homepage

- Chrome (latest)

- Firefox (latest)│   ├── whitepaper/   # Whitepaper page- **Node.js 20+** runtime```powershell

- Safari (latest)

- Edge (latest)│   ├── token/        # Token presale page



## 📄 License│   └── api/          # API routes



Proprietary - Evera Protocol├── components/       # React components



## 🤝 Contributing│   ├── layout/       # Header, Footer, Navigation### Styling & Animation# Navigate to project directoryOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.



Please read CONTRIBUTING.md for development guidelines.│   ├── home/         # Homepage sections


│   └── shared/       # Reusable UI components- **Tailwind CSS 3.4+** with custom brand colors

├── content/          # Static content data

├── lib/              # Utilities (analytics, validation)- **Framer Motion 11+** for animationscd evera-landing

└── types/            # TypeScript definitions

```- **@tailwindcss/typography** for whitepaper prose styling



## 🛠️ DevelopmentYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.



```bash### Forms & Validation

# Development with hot reload

pnpm dev- **React Hook Form 7+** for form state management# Install dependencies



# Build for production- **Zod 3+** for schema validation

pnpm build

npm installThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

# Start production server

pnpm start### Data Visualization



# Run linter- **Recharts 2+** for token economics charts

pnpm lint



# Run tests

pnpm test### Additional Libraries# Copy environment variables## Learn More



# Run E2E tests- **Swiper.js 11+** for pitch deck slides

pnpm test:e2e

```Copy-Item .env.local.example .env.local



## 🧪 Testing---



- **Unit tests**: Jest + React Testing LibraryTo learn more about Next.js, take a look at the following resources:

- **E2E tests**: Playwright

- **Coverage**: Contract tests, component tests, integration tests## 🚦 Getting Started



```bash# Start development server

pnpm test              # Unit tests

pnpm test:e2e          # Integration tests### Prerequisites

Node.js 20+ installednpm run dev- Next.js Documentation - learn about Next.js features and API.

📊 Analytics

npm package manager

Privacy-friendly Plausible Analytics tracks:

Email signups```- Learn Next.js - an interactive Next.js tutorial.
CTA clicks
Whitepaper downloads### Installation
Page views

Respects Do Not Track and requires no cookies.

Navigate to project directory

🌐 Deployment

```powershellThe site will be available at http://localhost:3000You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Vercel (Recommended)

cd "c:\Users\onech\Desktop\Evera Protocol\evera-landing"

# Install Vercel CLI   ```

pnpm install -g vercel



# Deploy

vercel2. **Install dependencies**## 📁 Project Structure## Deploy on Vercel



# Deploy to production   ```powershell

vercel --prod

```   npm install



Configure environment variables in Vercel dashboard.   ```



## 🔒 Environment Variables```The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.



Required variables (see `.env.example`):3. **Set up environment variables**



- `CONVERTKIT_API_KEY` - Email subscriptions   - Copy `.env.local.example` to `.env.local`evera-landing/

- `PLAUSIBLE_DOMAIN` - Analytics domain

- `NEXT_PUBLIC_SITE_URL` - Production URL   - Add your API keys (ConvertKit, Plausible Analytics)

- `NEXT_PUBLIC_DISCORD_URL` - Community link

- `NEXT_PUBLIC_TWITTER_URL` - Social media link├── src/Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.



## 🎨 Brand Colors4. **Run the development server**



```css   ```powershell│   ├── app/              # Next.js App Router pages

--charcoal: #313638;  /* Primary dark */

--gold: #E4B363;      /* Accent/CTA */   npm run dev│   │   ├── page.tsx      # Homepage

--stone: #E0DFD5;     /* Light background */

--coral: #EF6461;     /* Error/accent */   ```│   │   ├── layout.tsx    # Root layout

│ │ ├── globals.css # Global styles

📝 Documentation

Open your browser│ │ └── api/ # API routes

Contributing Guide - Code style and contribution guidelines
Deployment Guide - Detailed deployment instructions Navigate to http://localhost:3000│ │ ├── analytics/
Analytics Guide - Analytics events and tracking
Content Update Guide - Non-technical content editing│ │ └── subscribe/

🤝 Contributing---│ ├── components/ # React components

Fork the repository│ │ ├── layout/ # Header, Footer, Navigation
Create feature branch (git checkout -b feature/amazing-feature)
Commit changes (git commit -m 'Add amazing feature')## 📜 Available Scripts│ │ ├── home/ # Homepage sections
Push to branch (git push origin feature/amazing-feature)
Open Pull Request│ │ ├── shared/ # Reusable UI components

See CONTRIBUTING.md for detailed guidelines.```powershell│ │ ├── whitepaper/ # Whitepaper page components

📄 Licensenpm run dev # Start development server (http://localhost:3000)│ │ ├── pitch/ # Pitch deck components

MIT License - see LICENSE filenpm run build # Build for production│ │ ├── token/ # Token page components

📞 Contactnpm run start # Start production server│ │ └── about/ # About page components

Website: https://evera.networknpm run lint # Run ESLint│ ├── lib/ # Utility functions
Email: contact@evera.network
Twitter: @EveraProtocolnpm run type-check # Run TypeScript type checking│ │ ├── analytics.ts # Analytics tracking
Discord: Join our community


---

│   ├── types/            # TypeScript type definitions

**Built with ❤️ by the Evera Protocol team**

---│   └── content/          # Static content data

│       ├── navigation.ts # Navigation links

## 📁 Project Structure│       └── team.ts       # Team member data

├── public/               # Static assets

```├── tailwind.config.ts    # Tailwind configuration

src/├── tsconfig.json         # TypeScript configuration

├── app/                    # Next.js App Router└── package.json          # Dependencies

│   ├── layout.tsx         # Root layout```

│   ├── page.tsx           # Homepage

│   └── api/               # API routes## 🎨 Tech Stack

├── components/

│   ├── home/              # Homepage sections- **Framework**: Next.js 14.2+ (App Router)

│   ├── layout/            # Header, Footer- **Language**: TypeScript 5.3+

│   └── shared/            # Reusable UI components- **Styling**: Tailwind CSS 3.4+

├── content/               # Static data- **Animation**: Framer Motion 11+

├── lib/                   # Utilities- **Forms**: React Hook Form 7+ + Zod 3+

└── types/                 # TypeScript definitions- **Charts**: Recharts 2+

```- **Carousels**: Swiper 11+



---## 🛠️ Available Scripts



## 🎨 Brand Colors```powershell

# Development server with hot reload

- **Charcoal**: `#313638` (Primary dark)npm run dev

- **Gold**: `#E4B363` (Accent/CTA)

- **Stone**: `#E0DFD5` (Light background)# Build for production

- **Coral**: `#EF6461` (Error/accent)npm run build



---# Start production server

npm start

## 📚 Documentation

# Lint code

Full documentation available in `specs/001-develop-an-eye/`:npm run lint

- **spec.md** - Complete feature specification

- **data-model.md** - TypeScript interfaces# Type check

- **quickstart.md** - Testing scenariosnpm run type-check

- **contracts/** - API and component specifications```



---## 🎯 Key Features Implemented



## ✅ Current Status### ✅ Core Infrastructure

- [x] Next.js 14 with App Router

**✔️ Completed:**- [x] TypeScript with strict mode

- Next.js 14 project initialization- [x] Tailwind CSS with brand colors

- TypeScript configuration with strict mode- [x] Framer Motion animations

- Tailwind CSS with brand colors- [x] Environment configuration

- Project folder structure- [x] Analytics tracking system

- Shared UI components (Button, Card, Input)- [x] API routes for subscriptions

- Layout components (Header, Footer)

- Hero section with animations### ✅ Layout Components

- API routes (analytics, subscription)- [x] Responsive Header with navigation

- Type definitions- [x] Footer with links and social media

- Environment configuration- [x] Mobile menu with hamburger

- Development server running at http://localhost:3000

### ✅ Homepage

**🚧 In Progress:**- [x] Hero section with CTA buttons

- Homepage sections (Problem, Solution, Features, Stats)- [x] Animated entrance effects

- Whitepaper page- [x] Stats display

- Token page- [x] Scroll indicator

- Pitch deck

- About page### ✅ Shared UI Components

- [x] Button (with variants and sizes)

---- [x] Card (with elevation styles)

- [x] Input (with validation states)

## 🆘 Troubleshooting

### ✅ API Endpoints

### SWC Binary Error- [x] `/api/analytics/track` - Event tracking

If you see "Failed to load SWC binary":- [x] `/api/subscribe` - Email subscription with rate limiting

```powershell

Remove-Item -Path "node_modules" -Recurse -Force## 🎨 Brand Colors

Remove-Item -Path "package-lock.json" -Force

npm install- **Charcoal**: `#313638` - Primary dark

```- **Gold**: `#E4B363` - Accent/CTA

- **Stone**: `#E0DFD5` - Light background

### Port Already in Use- **Coral**: `#EF6461` - Error/accent

If port 3000 is busy:

```powershell## 📝 Environment Variables

npm run dev -- -p 3001

```See `.env.local.example` for all required environment variables:



---- `CONVERTKIT_API_KEY` - ConvertKit API key for email subscriptions

- `CONVERTKIT_FORM_ID` - ConvertKit form ID

**Built with ❤️ for a more truthful internet**- `PLAUSIBLE_DOMAIN` - Domain for Plausible Analytics

- `NEXT_PUBLIC_SITE_URL` - Full site URL
- `NEXT_PUBLIC_SITE_NAME` - Site name
- Social media links (Twitter, Discord, Telegram, GitHub)
- Feature flags (presale enabled, pitch deck enabled, etc.)

## 🔜 Next Steps

The foundation is complete! Next features to implement:

1. **Homepage Sections**:
   - Problem Section (key problems with icons)
   - Solution Section (architecture diagram)
   - Features Grid (3-column layout)
   - Stats Section (animated counters)
   - CTA Section (email capture form)

2. **Additional Pages**:
   - `/whitepaper` - Full whitepaper with TOC
   - `/token` - Token economics and presale
   - `/pitch` - Animated pitch deck slides
   - `/about` - Team, mission, vision
   - `/careers` - Job listings
   - `/milestones` - Project roadmap

3. **Advanced Features**:
   - Email capture form with React Hook Form
   - Token economics charts with Recharts
   - Pitch deck carousel with Swiper
   - Whitepaper PDF download
   - Social sharing functionality

## 📚 Documentation

- [Full Specification](../specs/001-develop-an-eye/spec.md)
- [Data Model](../specs/001-develop-an-eye/data-model.md)
- [API Contracts](../specs/001-develop-an-eye/contracts/api-routes.md)
- [Component Props](../specs/001-develop-an-eye/contracts/component-props.md)
- [Testing Guide](../specs/001-develop-an-eye/quickstart.md)

## 🤝 Contributing

This project follows the Evera Protocol coding guidelines. See [copilot-instructions.md](../.github/copilot-instructions.md) for detailed coding standards.

## 📄 License

Copyright © 2025 Evera Protocol. All rights reserved.

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
public		public
src		src
tests		tests
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.vercelignore		.vercelignore
README.md		README.md
eslint.config.mjs		eslint.config.mjs
jest.config.js		jest.config.js
jest.d.ts		jest.d.ts
jest.setup.js		jest.setup.js
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Evera Protocol Landing Page# Evera Protocol Landing Page# Evera Protocol Landing Page# Evera Protocol Landing PageThis is a Next.js project bootstrapped with `create-next-app`.

🚀 Quick StartBlockchain-based decentralized information verification platform

Prerequisites

Installation

Production Build

📦 Environment Variables

Installation### Success Metrics

🛠️ Tech Stack

📁 Project Structure

🚢 Deployment# Edit .env.local with your API keys

Deploy to Vercel# - CONVERTKIT_API_KEY---- npm (comes with Node.js)pnpm dev

📊 Analytics

🌐 Deployment

Vercel (Recommended)

📝 Documentation

🤝 Contributing---│ ├── components/ # React components

📄 Licensenpm run dev # Start development server (http://localhost:3000)│ │ ├── pitch/ # Pitch deck components

📞 Contactnpm run start # Start production server│ │ └── about/ # About page components

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

Evera Protocol Landing Page# Evera Protocol Landing Page# Evera Protocol Landing Page# Evera Protocol Landing PageThis is a Next.js project bootstrapped with create-next-app.

🚀 Quick StartBlockchain-based decentralized information verification platform

Prerequisites

Installation

Production Build

📦 Environment Variables

Installation### Success Metrics

🛠️ Tech Stack

📁 Project Structure

🚢 Deployment# Edit .env.local with your API keys

Deploy to Vercel# - CONVERTKIT_API_KEY---- npm (comes with Node.js)pnpm dev

📊 Analytics

🌐 Deployment

Vercel (Recommended)

📝 Documentation

🤝 Contributing---│ ├── components/ # React components

📄 Licensenpm run dev # Start development server (http://localhost:3000)│ │ ├── pitch/ # Pitch deck components

📞 Contactnpm run start # Start production server│ │ └── about/ # About page components

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Evera Protocol Landing Page# Evera Protocol Landing Page# Evera Protocol Landing Page# Evera Protocol Landing PageThis is a Next.js project bootstrapped with `create-next-app`.

Packages