mohammedsaid18/dashboard
1
0
نسخ 2
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

feature/keyword-actions-ui

تصفح المصدر
هذا الالتزام موجود في:
mohammedsaid18
2025-10-19 13:53:47 +03:00
الأصل 81a4683c50
التزام a1ce182317
41 ملفات معدلة مع 1486 إضافات و162 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

390
src/pages/Analysis.tsx
عرض الملف

@@ -1,22 +1,396 @@
import ContainerPage from "../components/shared/ContainerPage";
import SourcesChart from "../components/Analysis/SourcesChart";
import AnalysisSearch from "../components/Analysis/AnalysisSearch";
import BecomeTheSource from "../components/Analysis/BecomeTheSource";
import VisibilityAnalysis from "../components/Analysis/VisibilityAnalysis";
import { ChevronDown, Info, Search, Zap } from "lucide-react";
import { Lightbulb, Share2 } from "lucide-react";
import StrategyHero from "../components/Analysis/StrategyHero";
import RankingsCard from "../components/Analysis/RankingsCard";
import BacklinksCard from "../components/Analysis/BacklinksCard";
import Preplextiy from "../assets/icons/perplextiy-light.svg"
import ChatGPT from "../assets/icons/gpt.svg"
import Gemini from "../assets/icons/gemini2.svg"
import Google from "../assets/icons/google-original-logo.svg"
import Map from "../assets/icons/maps.svg"
import SharedIcon from "../components/icons/shared-icon";
import { useState } from "react";
import MetricTooltip from "../components/shared/MetricTooltip";
const Analysis = () => {
{/* <BecomeTheSource /> */ }
// <SourcesChart />
const healthcareSegments = [
{ percentage: 40, color: "#4C60E5" },
{ percentage: 20, color: "#9CCCFa" },
{ percentage: 24, color: "#93B3FE" },
{ percentage: 7, color: "#a2c4f1" },
{ percentage: 9, color: "#82d4fd" },
];
const sourceSegments = [
{ percentage: 30, color: "#4285f4" },
{ percentage: 30, color: "#34A853" },
{ percentage: 25, color: "#fbbc05" },
{ percentage: 10, color: "#4285f4" },
{ percentage: 5, color: "#EA4335" },
];
const healthcareItems = [
{ label: "40% Consumer Health Giants", color: "#4C60E5", highlighted: true },
{ label: "30% Mainstream Media Sections", color: "#4285F4", highlighted: false },
{ label: "20% Elite Midical Journals", color: "#34A853", highlighted: false, subtitle: "(Forbes, Inc.)" },
{ label: "10% Specialty Platforms", color: "#FBBC05", highlighted: false },
{ label: "3% Professional/Academic Crossovers", color: "#EA4335", highlighted: false },
];
const sourceItems = [
{ label: "30% Branded Aesthetics Social Signals", color: "#4C60E5", icons: ["🎯", "📌", "🎨"] },
{ label: "30% Local + Medical-Cosmetic Citations", color: "#4285F4", icons: ["🏥", "📍", "⚕️"] },
{ label: "20% Web 2.0 Microblogging Sites", color: "#34A853", icons: ["✍️", "💬", "📱"] },
{ label: "20% Multimedia Content & Beauty Visuals", color: "#FBBC05", icons: ["📹", "📷", "🎬"] },
{ label: "10% Community and UGC Signals", color: "#EA4335", icons: ["👥", "💭", "⭐"] },
];
return (
<ContainerPage>
<div className="space-y-8">
<>
<Header />
<ContainerPage>
<div className="mb-5">
<div className="mb-2 flex justify-between items-center">
<h1 className="text-xl font-bold text-grey-950 mb-1">Analysis of Visibility</h1>
<div className="flex items-center gap-[2.3rem] w-[61%] text-xs font-semibold text-grey-700 mt-1">
<div className="w-22 flex items-center gap-2">
<span className="w-full">
AIO Health
</span>
<MetricTooltip tooltipText="AIO Health" />
</div>
<div className="w-20 flex items-center gap-2">Backlinks
<MetricTooltip tooltipText="Backlinks" />
</div>
<div className="w-14 text-[#65677D]">G Pos #</div>
<div className="w-10 text-[#65677D]">Maps</div>
<div className="w-20 text-[#65677D]">Ai Overview</div>
<div className="w-16 text-[#65677D]">Chat GPT</div>
<div className="w-16 text-[#65677D]">Gemini</div>
<div className="w-16 text-[#65677D]">Perplexity</div>
</div>
</div>
<div className="flex items-center justify-between border border-grey-300 rounded-lg bg-white p-3">
<div>
<h2 className="text-sm font-semibold text-grey-950">BH Medical Spa of Beverly Hills</h2>
<div className="flex items-center gap-4 mt-1 text-xs">
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#17171B]">Sector:</span>
<span className="text-[#65677D] font-normal">Healthcare</span>
</div>
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#17171B]">Industry:</span>
<span className="text-[#65677D] font-normal">Medical Spa</span>
</div>
</div>
</div>
<div className="flex items-center gap-[2.3rem] w-[60%]">
<div className="flex items-center gap-3">
<svg width="20" height="20" viewBox="0 0 23 24" className="flex-shrink-0">
<circle opacity="0.8" cx="11.5" cy="12" r="9.55" stroke="#E9EAF1" strokeWidth="3.32" fill="none" />
<path d="M11.5518 2.44824C13.8878 2.44824 16.1428 3.30431 17.8904 4.85452C19.6379 6.40473 20.7568 8.54161 21.0354 10.861" stroke="#4C60E5" strokeWidth="3.32" strokeLinecap="round" fill="none" />
</svg>
<span className="text-sm font-semibold text-grey-900">24%</span>
</div>
<div className="flex items-center gap-3">
<svg width="20" height="20" viewBox="0 0 23 24" className="flex-shrink-0">
<circle opacity="0.8" cx="11.5" cy="12" r="9.55" stroke="#E9EAF1" strokeWidth="3.32" fill="none" />
<path d="M11.5518 2.44824C13.8878 2.44824 16.1428 3.30431 17.8904 4.85452C19.6379 6.40473 20.7568 8.54161 21.0354 10.861" stroke="#4C60E5" strokeWidth="3.32" strokeLinecap="round" fill="none" />
</svg>
<div className="flex flex-col">
<span className="text-sm font-semibold text-grey-900">14%</span>
<span className="text-[11px] font-semibold text-grey-700">50/370 links</span>
</div>
</div>
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white">
<svg width="15" height="15" viewBox="0 0 15 16">
<path d="M13.9853 8.15431C13.9853 7.67081 13.9419 7.2059 13.8613 6.75958H7.43933V9.40027H11.109C10.9478 10.2495 10.4643 10.9686 9.73908 11.4521V13.1691H11.9521C13.2414 11.979 13.9853 10.2309 13.9853 8.15431Z" fill="#4285F4" />
<path d="M7.43878 14.8186C9.27982 14.8186 10.8233 14.2111 11.9515 13.1697L9.73853 11.4527C9.13105 11.8618 8.3562 12.1097 7.43878 12.1097C5.66592 12.1097 4.15962 10.9134 3.62032 9.3017H1.35156V11.0622C2.47354 13.2875 4.7733 14.8186 7.43878 14.8186Z" fill="#34A853" />
<path d="M3.62113 9.29494C3.48475 8.88582 3.40417 8.45191 3.40417 7.99939C3.40417 7.54688 3.48475 7.11297 3.62113 6.70385V4.94339H1.35237C0.887459 5.86081 0.620911 6.89601 0.620911 7.99939C0.620911 9.10278 0.887459 10.138 1.35237 11.0554L3.11902 9.67927L3.62113 9.29494Z" fill="#FBBC05" />
<path d="M7.43878 3.89567C8.44298 3.89567 9.33561 4.24281 10.0485 4.91228L12.0011 2.95966C10.8171 1.85627 9.27982 1.1806 7.43878 1.1806C4.7733 1.1806 2.47354 2.71171 1.35156 4.94327L3.62032 6.70373C4.15962 5.09204 5.66592 3.89567 7.43878 3.89567Z" fill="#EA4335" />
</svg>
<span className="text-sm font-semibold text-grey-900">5</span>
</div>
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="16" viewBox="0 0 11 16" fill="none">
<path d="M2.80688 11.5217C3.25814 12.086 3.71773 12.7957 3.95824 13.2243C4.25114 13.7815 4.37259 14.1578 4.59047 14.8317C4.71787 15.2008 4.83932 15.3127 5.09412 15.3127C5.37273 15.3127 5.50013 15.1246 5.59776 14.8317C5.80136 14.1994 5.95853 13.7184 6.20737 13.26C7.16703 11.4502 8.73155 10.1643 9.61262 8.40216C9.61262 8.40216 10.1925 7.32582 10.1925 5.81846C10.1925 4.41349 9.62096 3.43716 9.62096 3.43716L2.81046 11.5336L2.80688 11.5217Z" fill="#34A853" />
<path d="M0.49625 8.21276C1.04514 9.46294 2.09172 10.5583 2.80611 11.5228L6.59236 7.03402C6.59236 7.03402 6.05776 7.73412 5.09215 7.73412C4.0158 7.73412 3.13949 6.87686 3.13949 5.79337C3.13949 5.04802 3.5836 4.53128 3.5836 4.53128C0.797483 4.94563 0.952267 5.62072 0.487915 8.21038L0.49625 8.21276Z" fill="#FBBC04" />
<path d="M6.64104 0.922089C7.90313 1.3281 8.97471 2.18417 9.61766 3.43435L6.59342 7.04202C6.59342 7.04202 7.03753 6.52289 7.03753 5.77993C7.03753 4.67382 6.10406 3.83917 5.09677 3.83917C4.14068 3.83917 3.59656 4.53094 3.59656 4.53094C3.82873 4.00229 6.22789 1.10188 6.64462 0.923279L6.64104 0.922089Z" fill="#4285F4" />
<path d="M1.18726 2.50895C1.93975 1.61358 3.25898 0.687256 5.08067 0.687256C5.96056 0.687256 6.62851 0.920623 6.62851 0.920623L3.59236 4.52828C3.38757 4.4172 1.38967 2.86138 1.18726 2.50418V2.50895Z" fill="#1A73E8" />
<path d="M0.496744 8.21327C0.496744 8.21327 0.000244141 7.22741 0.000244141 5.80816C0.000244141 4.46273 0.52651 3.28399 1.19089 2.52197L3.596 4.54607L0.500316 8.21327H0.496744Z" fill="#EA4335" />
</svg>
<span className="text-sm font-semibold text-grey-900">8</span>
</div>
<div className="flex items-center gap-5">
<div className="text-xs text-grey-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={Gemini} alt="G" className="w-4 h-4" />
Invisible
</div>
<div className="text-xs text-grey-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={ChatGPT} alt="ChatGPT" className="w-4 h-4" />
Invisible</div>
<div className="text-xs text-grey-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={Gemini} alt="Gemini" className="w-4 h-4" />Invisible</div>
<div className="text-xs text-grey-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={Preplextiy} alt="Perplexity" className="w-4 h-4" />
Invisible</div>
</div>
<button className="flex items-center gap-1 px-1.5 py-1 rounded-md border border-grey-300 bg-white shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<path d="M6.59226 2H5.69226C3.75926 2 2.19226 3.567 2.19226 5.5V10.5C2.19226 12.433 3.75926 14 5.69226 14H10.6923C12.6253 14 14.1923 12.4333 14.1923 10.5003C14.1923 10.2415 14.1923 9.95005 14.1923 9.6" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" />
<path d="M10.1923 2H14.1923M14.1923 2V6M14.1923 2L8.19128 8" stroke="#65677D" stroke-width="1.5" stroke-linejoin="round" />
</svg>
<span className="text-xs font-semibold text-grey-900">Share</span>
</button>
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-4">
<div className="flex flex-col gap-5 rounded-xl bg-white border border-grey-300 shadow-sm overflow-hidden justify-between">
<div className="flex items-center gap-2 px-4 py-3 border-b border-grey-300 h-[60px]">
<h2 className="text-base font-semibold text-grey-950">Ai Frequently Cited Sources in Healthcare</h2>
</div>
<div className="flex flex-col justify-between h-full gap-8 px-6 pb-6">
<div className="flex items-center gap-5">
<DonutChart segments={healthcareSegments} size={200} strokeWidth={53} />
<div className="flex flex-col gap-1.5 flex-1">
{healthcareItems.map((item, index) => (
<div
key={index}
className={`flex items-center gap-2.5 px-2 py-1.5 rounded-md border hover:border-[#C9D7FB] hover:bg-[#ECF1FD] ${item.highlighted ? "border-[#C9D7FB] bg-[#ECF1FD]" : "border-grey-300"
}`}
>
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: item.color }} />
<div className="flex items-center gap-0.5 flex-1">
<span className="text-sm">
<span className="font-bold text-grey-900">{item.label.split(" ")[0]}</span>
<span className="text-grey-900 font-medium"> {item.label.split(" ").slice(1).join(" ")}</span>
</span>
{item.subtitle && (
<span className="text-sm text-grey-700 ml-1">{item.subtitle}</span>
)}
</div>
</div>
))}
</div>
</div>
<div className="flex flex-col gap-1.5 px-3 py-3 rounded-xl bg-[#ECF1FD]">
<div className="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18" fill="none">
<path d="M7.05074 3.62323C5.68916 3.62323 4.49145 4.39338 3.86719 5.52409" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.27642 14.6968C4.55366 14.6212 4.83089 14.5456 5.10813 14.47C9.24146 13.2854 9.03984 13.3862 9.11545 13.2098C9.72033 11.1936 10.1236 11.748 11.2073 10.2106C11.7114 9.47974 12.0894 8.64804 12.2407 7.76592C12.3163 7.41308 12.3415 7.03503 12.3415 6.65698C12.3415 3.50657 9.79594 0.961044 6.67073 0.961044C3.54553 0.961044 1 3.50657 1 6.63178C1 7.51389 1.17642 8.42121 1.55447 9.22771C1.83171 9.83259 2.23496 10.3871 2.68862 10.8659C3.08885 11.2852 3.58998 11.6613 3.90862 12.1576" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.28516 17.039L8.81361 16.0056" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span className="text-sm font-semibold text-grey-950">How Ai and LLMs Choose Their Sources</span>
</div>
<p className="text-xs text-grey-900 leading-[18px]">
Our analysis reveals distinct patterns in how leading AIs source and prioritize industry information. For example, ChatGPT leans heavily on user-generated content, while Google's AI Overviews favors authoritative tech review sites. Across the board, backlink quality plays a crucial role, with...{" "}
<span className="text-[#4C60E5] underline cursor-pointer">read more</span>
</p>
</div>
</div>
</div>
<div className="flex flex-col gap-5 rounded-xl bg-white border border-grey-300 shadow-sm overflow-hidden">
<div className="flex flex-col gap-7 px-4 py-3 border-b border-grey-300 h-[60px]">
<div>
<h2 className="text-base font-bold text-grey-950">Become the Source</h2>
<p className="text-xs text-grey-700">
Custom Authority Beacons & Backlink Strategy, Tailored for <span className="font-bold text-grey-950">Medical Spas</span>
</p>
</div>
</div>
<div className="flex flex-col gap-4 px-6 pb-6">
<div className="flex items-center gap-5">
<DonutChart segments={sourceSegments} size={200} strokeWidth={51.76} />
<div className="flex flex-col gap-2 flex-1">
{sourceItems.map((item, index) => (
<div key={index} className="flex items-start gap-1">
<div className="w-[10px] h-[10px] rounded-full flex-shrink-0 mt-[10px]" style={{ backgroundColor: item.color }} />
<div className="flex flex-col gap-0 flex-1">
<div className="flex items-center justify-between">
<div className="flex items-center gap-0.5">
<span className="text-sm font-bold text-grey-900">{item.label.split(" ")[0]}</span>
<MetricTooltip tooltipText={item.label.split(" ").slice(1).join(" ")} />
</div>
<div className="flex items-center gap-1">
{item.icons.map((icon, i) => (
<div key={i} className="w-[30px] h-[30px] rounded-md border border-grey-300 bg-white flex items-center justify-center text-md">
{icon}
</div>
))}
</div>
</div>
<span className="text-sm text-grey-900">{item.label.split(" ").slice(1).join(" ")}</span>
</div>
</div>
))}
</div>
</div>
<div className="flex items-center justify-center">
<button className="w-[55%] px-2 py-6 rounded-full bg-white border-4 border-transparent bg-gradient-to-r from-blue-500 via-red-500 via-orange-400 via-yellow-400 to-green-500 bg-clip-padding relative group mx-auto">
<div className="absolute inset-0 bg-white rounded-full m-[3px] flex items-center justify-center gap-3">
<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
<Zap className="w-4 h-4 text-white fill-white" />
</div>
<span className="text-md font-semibold text-gray-900">
Add your Keywords and Become the Source
</span>
</div>
</button>
{/* <button className="relative flex items-center gap-2 px-3 py-2.5 rounded-full border-2 border-[#4C60E5] bg-white">
<div className="w-6 h-6 rounded-full bg-[#4C60E5] flex items-center justify-center">
<svg width="16" height="16" viewBox="0 0 17 16" fill="none">
<path d="M9.21967 6.45829L9.28321 2.02145C9.28861 1.64492 8.81816 1.47023 8.5765 1.75901L3.07231 8.33635C2.85614 8.59467 3.03653 8.98819 3.37334 8.99302L6.68243 9.04041C6.90333 9.04357 7.07983 9.2252 7.07667 9.44609L7.01049 14.0671C7.00499 14.4511 7.49125 14.6214 7.72657 14.3179L13.2691 7.16853C13.4729 6.90569 13.2855 6.52345 12.953 6.52345L11.45 6.52345" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<span className="text-sm font-semibold text-grey-950">Add your Keywords and Become the Source</span>
</button> */}
</div>
</div>
</div>
</div>
{/* <div className="space-y-8">
<AnalysisSearch />
<VisibilityAnalysis />
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<SourcesChart />
<BecomeTheSource />
</div>
</div>
</ContainerPage>
</div> */}
<StrategyHero />
<div className="flex items-start gap-5">
<RankingsCard />
<BacklinksCard />
</div>
</ContainerPage>
</>
);
};
export default Analysis;
interface DonutChartProps {
segments: {
percentage: number;
color: string;
}[];
size?: number;
strokeWidth?: number;
}
function Header() {
return (
<div className="w-full border-b border-grey-300 bg-[#F6F8FE] px-2 py-2.5 mt-[-8px]">
<div className="flex items-center justify-center gap-1.5">
<div className="flex h-[30px] w-[312px] items-center gap-1.5 rounded-lg border border-grey-300 bg-white p-0.5">
<div className="flex items-center gap-1.5 flex-1">
<div className="flex items-end rounded-lg">
<div className="flex px-1.5 items-center justify-center">
<span className="text-xs font-semibold text-grey-700">AIQ</span>
</div>
<div className="flex px-1.5 items-center justify-center rounded-[5px] bg-grey-300">
<span className="text-xs font-semibold text-grey-700">10</span>
</div>
</div>
<div className="w-px h-5 bg-grey-300" />
<div className="flex px-1.5 justify-between items-center flex-1">
<span className="text-sm text-grey-900 tracking-tight">mysite.com</span>
<ChevronDown className="w-3 h-3 text-grey-800" />
</div>
</div>
</div>
<button className="flex h-7 px-1 items-center justify-center gap-1.25 rounded-md border border-grey-300 bg-white shadow-sm">
<div className="flex px-1 items-center gap-1.25">
<Search className="w-4 h-4 text-grey-800" strokeWidth={1.5} />
<span className="text-xs font-semibold text-grey-900">Analyze</span>
</div>
</button>
</div>
</div>
);
}
function DonutChart({ segments, size = 200, strokeWidth = 53 }: DonutChartProps) {
const radius = size / 2 - strokeWidth / 2;
const centerX = size / 2;
const centerY = size / 2;
let accumulatedAngle = 0;
return (
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="flex-shrink-0">
{segments.map((segment, index) => {
const angle = (segment.percentage / 100) * 360;
const startAngle = accumulatedAngle - 90;
const endAngle = startAngle + angle;
const startRad = (startAngle * Math.PI) / 180;
const endRad = (endAngle * Math.PI) / 180;
const x1 = centerX + radius * Math.cos(startRad);
const y1 = centerY + radius * Math.sin(startRad);
const x2 = centerX + radius * Math.cos(endRad);
const y2 = centerY + radius * Math.sin(endRad);
const largeArcFlag = angle > 180 ? 1 : 0;
const pathData = [
`M ${x1} ${y1}`,
`A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`
].join(' ');
accumulatedAngle += angle;
return (
<path
key={index}
d={pathData}
fill="none"
stroke={segment.color}
strokeWidth={strokeWidth}
strokeLinecap="butt"
/>
);
})}
<circle
cx={centerX}
cy={centerY}
r={size * 0.268}
fill="none"
stroke="#0B246F"
strokeWidth={13.37}
opacity={0.07}
/>
</svg>
);
}

21
src/pages/Keywords.tsx Normal file
عرض الملف

@@ -0,0 +1,21 @@
import React from 'react'
import { keywordSections } from "../assets/keyword-data";
import { KeywordSection } from "../components/KeywordSection";
import ContainerPage from '../components/shared/ContainerPage';
import HeaderPage from '../components/shared/HeaderPage';
const Keywords = () => {
return (
<ContainerPage>
<HeaderPage title="Keyword Visibility Matrix" />
<div className="flex flex-col">
{keywordSections.map((section) => (
<KeywordSection key={section.id} section={section} />
))}
</div>
</ContainerPage>
)
}
export default Keywords

11
src/pages/Portfolio.tsx
عرض الملف

@@ -9,12 +9,14 @@ import { CircleCheck } from 'lucide-react';
import Progress from "../assets/icons/InProgress.svg"
import No from "../assets/icons/NA.svg"
import Share2 from "../assets/icons/Share2.png"
import SharedIcon from '../components/icons/shared-icon';
const done = <div className='flex items-center gap-2 w-[100px]'> <CircleCheck className='w-6 h-6 text-[#fff] bg-green-500 rounded-full' /> <span className='text-green-500 font-bold text-md'>Done</span></div>
const progress = <div className='flex items-center gap-2 w-[100px]'>
<img src={Progress} alt="" className='w-6 h-6' />
<span className='text-blue-500 font-bold text-md'>In Progress</span></div>
<span className='text-blue-500 font-bold text-md'>In Progress</span>
</div>
// Category table data
const nA = <div className='flex items-center gap-2'>
@@ -87,7 +89,7 @@ function Portfolio() {
<span className='text-gray-500 rounded-md text-sm sm:text-md font-normal'>
<span className='font-bold pr-2 sm:pr-3 text-[#2B2D3B]'>Links:</span>
Indexed <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-xl mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-xl mx-1 text-xs sm:text-sm'>4%</b>
</span>
<span className='flex items-center font-normal gap-2 text-[#787B91] sm:text-md'>Content Publishing
@@ -107,10 +109,7 @@ function Portfolio() {
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings" />
<button className='bg-[#fff] border px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M1.80154 10.583C1.7998 10.2479 1.7998 9.88794 1.7998 9.49999C1.7998 6.80829 1.7998 5.46245 2.37857 4.45999C2.75773 3.80327 3.30308 3.25792 3.95981 2.87876C4.96226 2.29999 6.30811 2.29999 8.9998 2.29999C11.6915 2.29999 13.0373 2.29999 14.0398 2.87876C14.6965 3.25792 15.2419 3.80327 15.621 4.45999C16.1998 5.46245 16.1998 6.80829 16.1998 9.49999C16.1998 12.1917 16.1998 13.5375 15.621 14.54C15.2419 15.1967 14.6965 15.7421 14.0398 16.1212C13.0373 16.7 11.6915 16.7 8.9998 16.7C8.60253 16.7 8.23457 16.7 7.8927 16.6981" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" />
<path d="M6.99503 6.79999H11.7002M11.7002 6.79999V11.5059M11.7002 6.79999L2.7002 15.8" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<SharedIcon />
<span>Export</span>
</button>

4
src/pages/Strategy.tsx
عرض الملف

@@ -2,8 +2,8 @@
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 Vector from "../assets/icons/Vector.svg"
import Vector2 from "../assets/icons/Vector2.svg"
import ShowDetails from "../components/Strategy/ShowDetails"
import ProgressMetrics from "../components/Strategy/ProgressMetrics"
import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"