Updated the design step 1 is finsih now I'll check it with mohammed

src/pages/Strategy.tsx

@@ -1,47 +1,44 @@
-"use client"
-import { useState } from "react"
-// import { Search, MessageSquare } from "lucide-react"
-import IntegratedStrategy from "../components/IntegratedStrategy"
-import Vector from "../assets/icons/Vector.png"
-import Vector2 from "../assets/icons/Vector2.png"
-import ShowDetails from "../components/Strategy/ShowDetails"
-import ProgressMetrics from "../components/Strategy/ProgressMetrics"
-import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"
-import HeaderPage from "../components/shared/HeaderPage"
-import ContainerPage from "../components/shared/ContainerPage"
-
-
-
-
-// Main integrated dashboard component
-function Strategy() {
-    const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")
-
-    return (
-        <ContainerPage>
-            <HeaderPage title="Strategy" />
-            <div className="flex  bg-white h-[100%]">
-
-                {/* <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} /> */}
-
-                <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
-
-                <div className="flex-1 px-4">
-                    <ProgressMetrics />
-
-                    <div className="bg-white rounded-lg border border-gray-200 p-3 pb-10">
-
-                        {
-                            selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails />
-                        }
-                        {/* <IntegratedStrategy /> */}
-                        {/* <ShowDetails /> */}
-                    </div>
-                </div>
-
-            </div>
-        </ContainerPage>
-    )
-}
-
-export default Strategy
+"use client"
+import { useState } from "react"
+// import { Search, MessageSquare } from "lucide-react"
+import IntegratedStrategy from "../components/IntegratedStrategy"
+import Vector from "../assets/icons/Vector.png"
+import Vector2 from "../assets/icons/Vector2.png"
+import ShowDetails from "../components/Strategy/ShowDetails"
+import ProgressMetrics from "../components/Strategy/ProgressMetrics"
+import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"
+import HeaderPage from "../components/shared/HeaderPage"
+import ContainerPage from "../components/shared/ContainerPage"
+
+
+
+
+// Main integrated dashboard component
+function Strategy() {
+    const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")
+
+    return (
+        <ContainerPage>
+            <HeaderPage title="Strategy" />
+            <div className="flex lg:flex-row flex-col items-center lg:items-start bg-white h-[100%]">
+
+                {/* <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} /> */}
+
+                <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
+
+                <div className="flex-1 px-4">
+                    <ProgressMetrics />
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-3 pb-10">
+
+                        {selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails />
+                        }
+                    </div>
+                </div>
+
+            </div>
+        </ContainerPage>
+    )
+}
+
+export default Strategy