From 6521b694f45d679c1c5f861f6df8bb5b90d9153c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 19:54:44 +0100
Subject: [PATCH] fix: replace motion/react imports with framer-motion +
 rounded content panel

- 4 files imported from 'motion/react' which was the removed 'motion' package.
  Replaced with 'framer-motion' (the package actually installed).
- Dashboard content area now has rounded corners, subtle border, and inset
  margin creating a "panel inside shell" visual separation from the sidebar.
---
 components/dashboard/DashboardShell.tsx       | 5 +++--
 components/marketing/mockups/funnel-chart.tsx | 2 +-
 components/ui/area-chart.tsx                  | 2 +-
 components/ui/bar-chart.tsx                   | 2 +-
 components/ui/funnel-chart.tsx                | 2 +-
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 122a73f..d5772bb 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -31,14 +31,15 @@ export default function DashboardShell({
   const openMobile = useCallback(() => setMobileOpen(true), [])
 
   return (
-    <div className="flex h-screen overflow-hidden">
+    <div className="flex h-screen overflow-hidden bg-neutral-950">
       <Sidebar
         siteId={siteId}
         mobileOpen={mobileOpen}
         onMobileClose={closeMobile}
         onMobileOpen={openMobile}
       />
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+      {/* Content panel — rounded on all corners with slight inset to separate from sidebar */}
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden my-2 mr-2 rounded-2xl bg-neutral-900 border border-neutral-800/60">
         <ContentHeader onMobileMenuOpen={openMobile} />
         <main className="flex-1 overflow-y-auto pt-4">
           {children}
diff --git a/components/marketing/mockups/funnel-chart.tsx b/components/marketing/mockups/funnel-chart.tsx
index a234ad2..421663b 100644
--- a/components/marketing/mockups/funnel-chart.tsx
+++ b/components/marketing/mockups/funnel-chart.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useSpring, useTransform } from "motion/react";
+import { motion, useSpring, useTransform } from "framer-motion";
 import {
   type CSSProperties,
   type ReactNode,
diff --git a/components/ui/area-chart.tsx b/components/ui/area-chart.tsx
index 7fe4fd2..3104f12 100644
--- a/components/ui/area-chart.tsx
+++ b/components/ui/area-chart.tsx
@@ -12,7 +12,7 @@ import {
   motion,
   useMotionTemplate,
   useSpring,
-} from "motion/react";
+} from "framer-motion";
 import {
   Children,
   createContext,
diff --git a/components/ui/bar-chart.tsx b/components/ui/bar-chart.tsx
index 160952c..4f929e9 100644
--- a/components/ui/bar-chart.tsx
+++ b/components/ui/bar-chart.tsx
@@ -9,7 +9,7 @@ import {
   AnimatePresence,
   motion,
   useSpring,
-} from "motion/react";
+} from "framer-motion";
 import {
   Children,
   createContext,
diff --git a/components/ui/funnel-chart.tsx b/components/ui/funnel-chart.tsx
index 7e926ac..38e507e 100644
--- a/components/ui/funnel-chart.tsx
+++ b/components/ui/funnel-chart.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useSpring, useTransform } from "motion/react";
+import { motion, useSpring, useTransform } from "framer-motion";
 import {
   type CSSProperties,
   type ReactNode,