Design Finish Stage 1
1. Finish 3 pages design
هذا الالتزام موجود في:
93
src/components/Strategy/ProgressMetrics.tsx
Normal file
93
src/components/Strategy/ProgressMetrics.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import Preplextiy from "../../assets/icons/Preplextiy.png"
|
||||
import ChatGPT from "../../assets/icons/gpt.png"
|
||||
import MetricCard from "../shared/MetricCard"
|
||||
|
||||
|
||||
function ProgressMetrics() {
|
||||
return (
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
|
||||
<h3 className="text-lg font-bold text-gray-600 mb-2">CPA Los Angeles</h3>
|
||||
|
||||
<div className="flex items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4">
|
||||
{/* Left section with progress indicators */}
|
||||
<div className="flex items-center w-1/4 ">
|
||||
{/* 60% Progress */}
|
||||
<div className="w-[100%]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">60%</div>
|
||||
<div className="text-md font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
|
||||
{/* Progress bar */}
|
||||
<div className="w-70 h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-blue-500 via-green-500 via-yellow-500 to-orange-500 rounded-full"
|
||||
style={{ width: "60%" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex items-center w-1/3 2xl:gap-32 gap-3">
|
||||
{/* 75% Keyword Visibility */}
|
||||
<div className="w-[30%]">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">75%</div>
|
||||
<div className="text-sm text-gray-500">Keyword Visibility</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 w-[100%]">
|
||||
<div className="flex items-center gap-8">
|
||||
<MetricCard
|
||||
img={ChatGPT}
|
||||
value="10" label="ChatGPT" tooltipText="ChatGPT is a chatbot that can answer questions and help with tasks." valueChange="+1" size="sm" />
|
||||
{/* <img src={ChatGPT} alt="ChatGPT" className="w-8 h-8" /> */}
|
||||
|
||||
<MetricCard
|
||||
img={Preplextiy}
|
||||
value="10" label="Preplextiy" tooltipText="Preplextiy is a chatbot that can answer questions and help with tasks." valueChange="+1" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right section with Chat GPT and metrics */}
|
||||
<div className="flex items-center w-1/3">
|
||||
|
||||
{/* Performance metrics with chart */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-42 h-24 relative">
|
||||
<svg viewBox="0 0 96 48" className="w-full h-full">
|
||||
<defs>
|
||||
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stopColor="#10B981" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#10B981" stopOpacity="0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0,40 Q24,35 48,25 Q72,20 96,15" fill="none" stroke="#10B981" strokeWidth="2" />
|
||||
<path d="M0,40 Q24,35 48,25 Q72,20 96,15 L96,48 L0,48 Z" fill="url(#chartGradient)" />
|
||||
<circle cx="96" cy="15" r="2" fill="#10B981" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="flex items-center justify-end gap-1 mb-1">
|
||||
<span className="text-gray-400">G</span>
|
||||
<span className="text-lg font-bold text-gray-900">7</span>
|
||||
<span className="text-lg text-green-600 font-medium">+10</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-1 mb-1">
|
||||
<span className="text-orange-500">📍</span>
|
||||
<span className="text-lg font-bold text-gray-900">5</span>
|
||||
<span className="text-lg text-green-600 font-medium">+3</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Current Rank</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <ShowDetails /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProgressMetrics
|
||||
المرجع في مشكلة جديدة
حظر مستخدم