I'll design an analytics page for you with the requested features. I'll use Next.js with the App Router and create a responsive design using Tailwind CSS and shadcn/ui components. Let's break this down into components and implement the analytics page.

Let's start by creating the main analytics page and its components:

This analytics dashboard includes all the requested features:

1. A date range picker to select the data range for analytics.
2. A list of whitelisted URLs showing average duration on page and nudge acceptance rate.
3. Highlight cards displaying the most visited page, unique users, and logged-in users.
4. An auto nudge funnel chart showing the flow from total users to those who accepted the nudge.
5. A pie chart displaying the distribution of unique users and logged-in users.

The design is responsive and uses Tailwind CSS for styling. The charts are implemented using Recharts, which is compatible with the shadcn/ui chart components.

To use this analytics dashboard in your Next.js project:

1. Make sure you have the necessary dependencies installed, including @radix-ui/react-popover, date-fns, lucide-react, and recharts.
2. Copy the components into your project structure.
3. Update the mock data in each component with your actual data fetching logic.
4. If you need to track real-time analytics, you might want to consider using Vercel Analytics 12. You can integrate it into your Next.js application to automatically collect and visualize metrics for you.

Remember to replace the mock data with actual data from your backend or analytics service. You may also need to adjust the styling and layout to fit your specific design requirements.