Design Finish Stage 1

1. Finish 3 pages design

src/pages/Strategy.tsx

@@ -0,0 +1,47 @@
+"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