GreenScape - Landscaping Business Website 🌿

A complete, modern, and production-ready landscaping business website built with Next.js (App Router) and Tailwind CSS v4.

Features

• Responsive Design: Mobile-first architecture ensuring perfect display across all devices.
• Modern UI: Clean aesthetics utilizing a nature-inspired color palette, premium typography (Playfair Display and Inter), and generous whitespace.
• Scroll Animations: Smooth entrance animations for components as they enter the viewport using the IntersectionObserver API.
• Dynamic Routing: Built-in support for dynamic blog posts functionality using Next.js App Router ([slug]).
• Interactive Components: Pill-shaped floating navbar, interactive hover effects on cards and buttons, and a fully stylized contact form.
• Performance Optimized: Built using next/image for image optimization and next/font for local font loading without layout shifts.

Tech Stack

• Framework: Next.js 16 (App Router)
• Styling: Tailwind CSS v4
• Language: TypeScript
• Icons: Inline SVGs

Pages included

• Home (/): Comprehensive overview with hero slider, services, testimonials, portfolio, and newsletter.
• About (/about): Detailed company history, values, and expert team section.
• Services (/services): Full breakdown of individual landscaping services and step-by-step process.
• Blog (/blog): Article listing with categories.
• Blog Post (/blog/[slug]): Markdown-styled dynamic article rendering.
• Contact (/contact): Contact form, location details, and direct contact methods.

Getting Started

First, install the dependencies using npm, yarn, pnpm, or bun:

npm install

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

src/
├── app/
│   ├── about/            # About page
│   ├── blog/             # Blog listing & dynamic [slug] routes
│   ├── components/       # Reusable UI components
│   ├── contact/          # Contact page
│   ├── data/             # Centralized site data (siteData.ts)
│   ├── services/         # Services page
│   ├── globals.css       # Tailwind & custom CSS
│   ├── layout.tsx        # Root layout (Navbar/Footer)
│   └── page.tsx          # Home page

Contributing

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

License

MIT