ecova — Next.js 作品集模板

SHA-256: 8db6ddbca693fe3e858dfe96b6c27dcec604b7d741d09fd209bb3353a528e858

2026-10-14T21:17:02.559Z

<div align="center">

# ⚡ Ecova

### Clean Energy, Smart Future

A premium marketing website for a modern clean-energy company — blending biology and technology for a sustainable tomorrow.

[![Next.js](https://img.shields.io/badge/Next.js-14-black?style=flat-square&logo=next.js)](https://nextjs.org)
[![React](https://img.shields.io/badge/React-18-61DAFB?style=flat-square&logo=react)](https://react.dev)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.4-06B6D4?style=flat-square&logo=tailwindcss)](https://tailwindcss.com)
[![License](https://img.shields.io/badge/License-MIT-green?style=flat-square)](#)

</div>

---

## Preview

<div align="center">

### 🏠 Home
<img src="public/preview/Home.png" alt="Home" width="85%" />

<br/>

### 💎 Our Value
<img src="public/preview/Our Value.png" alt="Our Value" width="85%" />

<br/>

### ⚙️ Services
<img src="public/preview/Services.png" alt="Services" width="85%" />

<br/>

### 💬 Testimonials
<img src="public/preview/Testimonials.png" alt="Testimonials" width="85%" />

<br/>

### 📩 Contact
<img src="public/preview/contact.png" alt="Contact" width="85%" />

</div>

---

## About Ecova

Ecova is a clean-energy company founded in 2016 with a mission to make sustainable energy accessible, reliable, and beautifully designed. The company sits at the intersection of **biology and technology** — studying natural systems like forests as blueprints for clean-energy engineering.

### Key Stats
| Metric | Value |
|--------|-------|
| Energy Installed | 25 MW |
| CO₂ Saved | 102,000 tons |
| Customers Served | 817+ |
| Countries | 14 |

---

## Features

- **Hero** — Cinematic landing with parallax scroll and GSAP animations
- **Services** — 6 detailed service pages (Solar, Storage, EV, Monitoring, Consulting, Commercial)
- **Projects** — Portfolio with case studies and client testimonials
- **Blog** — Articles on green tech, energy guides, and sustainability
- **Pricing** — Three-tier pricing (Starter, Home Pro, Commercial)
- **About** — Company story, team, philosophy, timeline, and impact stats
- **Contact** — Form + interactive map
- **Legal** — Privacy Policy & Terms pages
- **404** — Custom error page

### Tech Highlights

| Feature | Stack |
|---------|-------|
| Framework | Next.js 14 (Pages Router) |
| UI | React 18 |
| Styling | Tailwind CSS |
| Animations | GSAP + ScrollTrigger |
| Smooth Scroll | Lenis |
| Carousels | React Slick + Swiper |
| Icons | Iconify |
| Font | Manrope (Google Fonts) |

---

## Brand Identity

| Color | Hex | Usage |
|-------|-----|-------|
| Dark | `#0f1714` | Primary text, backgrounds |
| Light | `#f2f5f1` | Page backgrounds |
| Primary | `#cce69b` | Accent, buttons, highlights |
| Secondary | `#1c2924` | Cards, secondary elements |
| Gray | `#8a9992` | Body text, muted content |

---

## Pages

```
/               → Home (12 sections)
/about          → About Ecova
/services       → Services listing
/services/[slug]→ Service detail
/projects       → Projects listing
/projects/[slug]→ Project detail
/blogs          → Blog listing
/blogs/[slug]   → Blog post
/pricing        → Pricing plans
/contact        → Contact form + map
/privacy        → Privacy Policy
/terms          → Terms & Conditions
/404            → Not Found
```

---

## Getting Started

### Prerequisites

- Node.js 18+
- npm, yarn, or pnpm

### Install & Run

```bash
# Clone the repo
git clone https://github.com/akajdid-mostafa/ecova.git
cd ecova

# Install dependencies
npm install

# Start dev server
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser.

### Commands

| Command | Description |
|---------|-------------|
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run start` | Start production server |
| `npm run lint` | Run ESLint |

---

## Project Structure

```
ecova/
├── public/
│   ├── images/          # Static images
│   ├── videos/          # Video testimonials
│   └── preview/         # README screenshots
├── src/
│   ├── components/
│   │   ├── home/        # Homepage sections
│   │   ├── about/       # About page sections
│   │   ├── services/    # Services sections
│   │   ├── projects/    # Projects sections
│   │   ├── contact/     # Contact sections
│   │   └── shared/      # Reusable (Navbar, Footer, etc.)
│   ├── data/            # Static data (services, projects, blogs)
│   ├── hooks/           # Custom React hooks
│   ├── layouts/         # Page layouts
│   ├── pages/           # Next.js pages
│   └── styles/          # Global CSS
├── tailwind.config.js
├── next.config.js
└── package.json
```

---

## Adding More Screenshots

1. Take screenshots of your sections
2. Place them in `public/preview/`
3. Add the `<img>` tag in the Preview section above
4. The README will display them automatically

**Current screenshots:** `Home.png`, `Our Value.png`, `Services.png`, `Testimonials.png`, `contact.png`

---

## Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

---

## Author

**Akajdid Mostafa** — [GitHub](https://github.com/akajdid-mostafa)

---

<div align="center">

Made with ⚡ by Ecova

</div>