Advertising Agency Project with React and MongoDB

I'll create a comprehensive advertising agency website using Next.js (React) for the frontend and MongoDB for the backend. This project will follow the sitemap you provided with a modern, professional design.

Project Overview

I've created a comprehensive advertising agency website using Next.js for the frontend and MongoDB for the backend. The project follows the sitemap you provided and includes all the necessary pages and functionality.

Key Features

1. Modern UI with Responsive Design

   • Clean, professional interface that works on all device sizes
   • Consistent design system using shadcn/ui components
   • Interactive elements with smooth transitions

2. Complete Page Structure

   • Home page with hero section, services overview, case studies, and testimonials
   • About page with company story, values, team members, and timeline
   • Services page with detailed service offerings
   • Contact page with form and location information

3. MongoDB Integration

   • Database models for services, blog posts, case studies, testimonials, and contacts
   • API routes for data fetching and form submission
   • Structured schemas with proper validation

4. Interactive Components

   • Responsive navigation with mobile menu
   • Contact form with validation
   • Interactive cards and sections

Project Structure

The project follows the Next.js App Router structure with:

• app/ - Contains all page routes and layouts
• components/ - Reusable UI components
• models/ - MongoDB schemas
• lib/ - Utility functions including database connection
• api/ - API routes for data operations

Getting Started

To run this project:

1. Clone the repository
2. Install dependencies with npm install

3. Set up your MongoDB connection string as an environment variable:

   MONGODB_URI=your_mongodb_connection_string
4. Run the development server with npm run dev

You can then customize the content, styling, and functionality to match your specific requirements.

Please make sure to add the following environment variable to your project:

Additional Frontend Pages for the Advertising Agency Project

I'll provide the remaining frontend pages for your advertising agency project to complete the sitemap. These pages will complement the ones already provided (Home, About, Services, and Contact).

Frontend Pages for the Advertising Agency Project

I've provided additional frontend pages to complete your advertising agency website. These pages follow the sitemap structure you requested and maintain a consistent design language throughout the site.

Pages Included in This Response:

1. Case Studies Page

   • Showcases successful client projects
   • Features a highlighted case study
   • Includes industry categories

2. Portfolio Page

   • Displays creative work with filterable categories
   • Interactive gallery with hover effects
   • Creative process explanation

3. Blog Page

   • Featured article section
   • Recent posts grid
   • Category navigation
   • Newsletter signup

4. Testimonials Page

   • Client quotes and ratings
   • Featured testimonial highlight
   • Video testimonials section

5. FAQ Page

   • Comprehensive Q&A accordion
   • Category filtering
   • Contact CTA

6. Service Detail Page (Digital Marketing)

   • Detailed service description
   • Features and benefits
   • Process explanation
   • Related case studies
   • Service-specific FAQs

Key Features

• Responsive Design: All pages are fully responsive for mobile, tablet, and desktop
• Interactive Elements: Tabs, accordions, and hover effects enhance user experience
• Consistent Styling: Maintains the design system established in the previous pages
• Clear CTAs: Strategic call-to-action sections guide users through the conversion funnel
• SEO-Friendly Structure: Proper heading hierarchy and semantic HTML

These pages complete the frontend portion of your advertising agency website. You can now connect them to the MongoDB backend we set up previously to make the site fully dynamic.