⚡ Landing Page For - Ena Ema Technologies

A fully responsive and pixel-perfect landing page built with Next.js, Tailwind CSS, Radix UI, and Framer Motion.

---

📖 Project Overview

This project for Ena Ema Technologies is a custom-designed landing page converted from a Figma file into a responsive Next.js application.
The goal was to ensure a pixel-perfect UI across desktop, tablet, and mobile views, while keeping the code clean, reusable, and maintainable.

---

✨ Features

• 🎨 Pixel-perfect design matching the provided Figma file
• 📱 Fully responsive layout for desktop, tablet, and mobile
• ♻️ Reusable components for scalability and maintainability
• 🌈 Smooth, eye-pleasing animations with Framer Motion
• 🎛 Radix UI integration for accessible, headless components
• 🎨 Tailwind CSS & custom styling for fast, clean styling
• 🗂 Clean and organized folder structure

---

🛠 Tech Stack

Technology	Purpose
JavaScript (ES6+)	Primary programming language
Next.js	React framework for building UI
Tailwind CSS	Utility-first CSS framework
Radix UI	Accessible, unstyled UI primitives
Framer Motion	Animations and transitions

---

🧩 Folder Structure

ENA_EMA_TECHNOLOGIES/
├── .next/                       # Next.js build files
├── node_modules/                # Project dependencies
├── public/
│   ├── assets/                   # All static assets
│   │   ├── icons/                # SVGs or icon files
│   │   └── images/               # Image files (PNG, JPG, etc.)
│   │
│   └── fonts/                    # Custom fonts
│
├── src/
│   ├── app/
│   │   ├── favicon.ico
│   │   ├── globals.css           # Global styles
│   │   ├── layout.js             # Root layout
│   │   └── page.js               # Main landing page
│   │
│   └── components/
│       ├── Case Studies/         # Case study related components
│       ├── Choose Plan/          # Pricing/plan selection components
│       ├── shared/               # Common UI elements
│       │   ├── Button.jsx
│       │   └── UserField.jsx
│       │
│       ├── AboutUs.jsx
│       ├── CarouselCard.jsx
│       ├── Footer.jsx
│       ├── FromIdea.jsx
│       ├── GotQuestion.jsx
│       ├── Hero.jsx
│       ├── ReadyToTurn.jsx
│       └── WhyBusiness.jsx
│
├── .gitignore
├── eslint.config.mjs
├── jsconfig.json
├── next.config.mjs
├── package.json
└── pnpm-lock.yaml

---

🚀 Live Demo

🌐 Go Now...

---

🖼 Interface Snapshots

---

⚙️ Installation & Setup

1️⃣ Clone the repository

git clone https://github.com/your-username/landing-page.git
cd landing-page

2️⃣ Install dependencies

npm install

or

pnpm install

or

yarn install

3️⃣ Run the development server

npm run dev

or

pnpm dev

This app will be live at **https://ena-ema-technologies.vercel.app**

---

## 🧪 Build for production
```bash
npm run build
npm start

---

🧹 Code Quality

• Reusable components to reduce repetition
• Clean folder structure for easy scaling
• Consistent naming conventions for readability
• Custom hooks & utility functions where needed

---

🤝 Contributing

Pull requests are welcome!
For major changes, please open an issue first to discuss what you’d like to change.

---

Built with ❤️ using Next.js, Tailwind CSS, and Framer Motion.

---

👨‍💻 Developer

Developed by: Eftajul Islam Shadi
Portfolio | GitHub | LinkedIn