Our Agency

Our Agency is a frontend Next.js website developed in January 2025 for a custom agency to highlight their portfolio. The site features a dynamic landing page with interactive work previews, a dedicated works route, and a contact form. Built with Next.js, React, Framer Motion, Tailwind CSS, and JavaScript, it uses Framer Motion for smooth animations on hover and navigation. The platform offers a responsive, engaging experience, showcasing skills in dynamic routing, animation integration, and modern UI design.

Our Agency

Technology Stack

Next.jsNext.js
ReactReact
Framer MotionFramer Motion
Tailwind CSSTailwind CSS
JavaScriptJavaScript

Landing Page (/ Route)

The landing page features a responsive navbar with 'Our Work,' 'Play Music,' and 'Get in Touch' buttons, creating an intuitive navigation experience.

The hero section includes a heading, subheading, and smaller divs listing all agency works, with Framer Motion animations enhancing interactivity.

  • Responsive navbar with interactive buttons
  • Dynamic hero with engaging heading and subheading
  • Work preview divs with Framer Motion animations
  • Consistent design across devices
Landing Page (/ Route) image 1

On mouseover of any work div, the background image changes to the work’s image, and the heading/subheading area updates to show the work’s image, title, small description, and work type.

  • Dynamic background image change on hover
  • Animated content swap using Framer Motion
  • Interactive work previews with title and type
  • Smooth transitions for enhanced UX
Landing Page (/ Route) image 1

Work Detail Page (/works/{work-title})

Clicking a work div navigates to a dynamic route (/works/{work-title}), displaying a detailed view of the selected work, including its image, title, type, and comprehensive description.

The page provides an immersive experience with rich content and consistent styling.

  • Dynamic routing for individual work pages
  • Detailed work descriptions with images
  • Consistent layout with landing page previews
  • Responsive design for detailed content
Work Detail Page (/works/{work-title}) image 1

Works Route (/works)

The Works route, accessible via the 'Our Work' navbar link, displays all work cards with images, titles, and types, mirroring the landing page’s interactive design.

Clicking any card navigates to the respective /works/{work-title} route for detailed information.

  • Card-based layout for all agency works
  • Interactive cards with images and types
  • Seamless navigation to detailed work pages
  • Framer Motion animations for card interactions
Works Route (/works) image 1

Contact Route (/contact)

The Contact route, accessible via the 'Get in Touch' button, features a 'Send Message' form for users to submit inquiries or feedback.

The form is designed for simplicity and reliability, ensuring effective communication with the agency.

  • Integrated contact form with validation
  • Responsive design for desktop and mobile
  • Clear call-to-action for user inquiries
  • Consistent styling with Tailwind CSS
Contact Route (/contact) image 1

Technical Implementation

Built with Next.js for server-side rendering and dynamic routing, ensuring fast performance and SEO-friendly content delivery.

Utilizes Framer Motion for smooth animations on hover and navigation, combined with Tailwind CSS for responsive, utility-first styling.

  • Next.js dynamic routing for work pages
  • Framer Motion for interactive animations
  • React hooks for state and effect management
  • Tailwind CSS for consistent, responsive design
  • Optimized performance for agency portfolio